草庐IT

javascript - jQuery UI - 结合可选与可拖动

coder 2024-07-26 原文

正如问题所述，我正在尝试将 jQuery UI 的 Selectable 和 Draggable 功能组合到一个有效的拖放界面中，用户可以选择多个 div 并将这些 div 移动到 jQuery Droppables 中。

这是我必须允许用户在表格中的一行中选择 div 的代码:

    $('tr').selectable({
        filter: 'div',
        selected: function(event, ui) {
            $(ui.selected).draggable({
                containment: 'document',
                axis: 'y',
                snap: true,
                snapMode: 'inner',
                revert: 'invalid',
                opacity: 0.8,
                drag: function(e, ui) {
                    $('.ui-selected').css({
                        top : ui.position.top //Y-Axis Only
                    });
                    $('.ui-selected').addClass('ui-draggable-dragging');
                },
                stop: function() {
                    $('.ui-selected').removeClass('ui-selected ui-draggable');
                }
            });
        }
    });

如您所见，我已经尝试添加 jQuery UI 添加到被拖动/选择/等元素的已知类，但似乎充当实际可拖动元素的唯一元素是用户单击的元素(实际上是拖动)。

我的愿望是让用户拖动整个选定的组，并让它们都充当可拖动对象(即:无效时恢复，捕捉到可放置等)

有谁知道如何执行此操作或从这里去哪里？

此外，这是一个 jsfiddle准确地展示我的意思(以及我目前在这方面的位置)。您可能需要调整结果 View 的大小，使表格单元格的宽度都相同。

最佳答案

模拟行为。

  1. 选择多个项目时，只需将它们标记为手动选择(例如复选框，添加自定义样式等)
  2. 拖动时使用可拖动选项helper定义自定义克隆 helper : function(){ return "<p>custom item</p>" }, 这将隐藏单个项目。您可以根据需要进行自定义。
  3. 自定义放置实现，使用这些选定的项目附加到适当的位置。

关于javascript - jQuery UI - 结合可选与可拖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8807210/

javascriptjQuery自定codesectionjquery-uiuser-interface

有关javascript - jQuery UI - 结合可选与可拖动的更多相关文章

  1. ruby-on-rails - 结合 meta_search 与 acts_as_taggable_on - 2

    我在开发的Rails3网站的一些搜索功能上遇到了一个小问题。我有一个简单的Post模型，如下所示:classPost我正在使用acts_as_taggable_on来更轻松地向我的帖子添加标签。当我有一个标记为“rails”的帖子并执行以下操作时，一切正常:@posts=Post.tagged_with("rails")问题是，我还想搜索帖子的标题。当我有一篇标题为“Helloworld”并标记为“rails”的帖子时，我希望能够通过搜索“hello”或“rails”来找到这篇帖子。因此，我希望标题列的LIKE语句与acts_as_taggable_on提供的tagged_with方法

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - 将 Amazon Simple Notification service SNS 与 ruby​​ 结合使用 - 2

    很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visitthehelpcenter.关闭9年前。我需要从基于ruby​​的应用程序使用AmazonSimpleNotificationService，但不知道从哪里开始。您对从哪里开始有什么建议吗？

  4. ruby - 如何在 Cucumber 步骤定义中使单词可选？ - 2

    我在下面有一个步骤定义，它执行我想要它执行的操作，即它根据“PAGES”哈希的“page”元素检查页面的url。Then(/^Ishould(still)?beatthe"(.*)"page$/)do|still,page|BROWSER.url.should==PAGES[page]end步骤定义用于两者我应该在...页面我应该还在...页面但是，我不需要将“still”传递到block中。我只需要它是可选的以匹配步骤但不传递到block中。我该怎么做？谢谢。 最佳答案 您想将“静止”组标记为非捕获。这是通过使用?:启动组来完成的

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. ruby - 如何确定是否在 Ruby 中传递了可选参数 - 2

    如果我在Ruby中有以下方法:deffoo(arg1,arg2="bar")putsarg1putsarg2end有没有办法确定用户是否在方法中为arg2传递了一个值？显然，我可以将ifarg2=="bar"添加到方法中，但这并没有捕捉到用户自己手动传入"bar"的情况。当然，我可以将默认值设置为任何用户都不会传入的内容，但这样很快就会变得非常丑陋。那里有什么优雅的东西吗？ 最佳答案 deffoo(arg1,arg2=(arg2_not_passed=true;"bar"))putsarg1putsarg2puts'arg2wasp

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  9. ruby-on-rails - 将 Rails 与 Paperclip 和 SWFUpload 结合使用 - 2

    我有一个基本的Rails应用程序测试，其中包含一个用回形针处理的照片字段的用户模型。我创建了能够创建/编辑用户的View，并且照片上传工作正常。Editinguseruser_path(@user),:html=>{:method=>"put",:multipart=>true}do|f|%>|然后，我想将SWFUpload集成到我的应用程序中。我试着按照这个tutorial并运行testproject没有任何成功:浏览按钮不会打开文件对话框，并抛出错误#2176，这是关于selectFiles()方法的。首先，问题是Flashv.10与项目中包含的旧版本SWFUpload(2.1.0

  10. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

随机推荐