jQuery 1.7 UI 1.8可拖动,可放置和可排序共存

时间:2011-12-14 20:49:27

标签: jquery draggable jquery-ui-sortable droppable

  

可能重复:
  Drag and Drop between Multiple Lists and Sortable

我希望有两个包含各自元素的框。我希望这些元素可以排序并可拖动到另一个容器中(在那里它们可以与它们是新配偶进行分类)

我有这个代码: http://jsfiddle.net/Q63nc/

但似乎没有采取“可排序”属性,此外,一旦我移动蓝色框,我就不能再拖动了它。为什么这样?

感谢您提前耐心等待!

1 个答案:

答案 0 :(得分:0)

您遇到with sortable的问题是您指定了错误的类。您需要选择列表,而不是列表中的项目。

要获得所需功能,请查看the sortable connectWith property

connectWith选项的说明:

  

使用也具有可排序的项目的jQuery选择器。如果使用,可排序现在连接到另一个单向,因此您可以从此可排序拖动到另一个。

这是一个新的小提琴,表明它有效 - http://jsfiddle.net/huWYN/

 $(function(){
     $("#left-side, #right-side")
         .sortable({
             axis: "x",
             connectWith: ".droppable"
         })
         .disableSelection();
});

我添加了disableSelection,因此当您移动它们时,您不会意外地将列表中的内容弄清楚。它只是让体验更顺畅。您可能希望对两个列表都在的整个容器执行此操作。

disableSelection尚未记录,但它是the jQuery UI Core as of 1.7的一部分。

来自this thread post on the function

  

它对于制作文本元素或包含的元素很有用   文字,不是文字可选的。例如,如果你有一个可拖动的元素,那么你   当用户去拖动元素时,可能不希望发生文本选择。

相关问题