jQuery UI可排序和可选择

有谁知道如何组合jQuery UI可选择和可排序？ 此脚本： http ： //nicolas.rudas.info/jquery/selectables_sortables/在Chrome中不起作用，它也有插件修改。

Answer 1

刚从rdworth找到这个非常简单的解决方案：

CSS：

ul { width: 300px; list-style: none; margin: 0; padding: 0; } li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; } li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; } .ui-selecting { background: #eee; } .ui-selecting .handle { background: #ddd; } .ui-selected { background: #def; } .ui-selected .handle { background: #cde; } 

HTML：

 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
  

使用Javascript：

 $( "#list" ) .sortable({ handle: ".handle" }) .selectable({ filter: "li", cancel: ".handle" }) .find( "li" ) .addClass( "ui-corner-all" ) .prepend( "
" ); 

看： 这个小提琴。

Answer 2

http://jsfiddle.net/t9YTB/

这就是我可以给你的:)但是这个想法就在那里。 它不是完整的，但希望你可以玩价值观，看看它是如何从那里:)

Answer 3

我的jQuery base-arsenal的一部分包括以下内容，因为当你去拖东西并最终选择文本时它通常很烦人 ……

 // disables text selection on sortable, draggable items $( ".sortable" ).sortable(); $( ".sortable" ).disableSelection(); 

不确定你是否可以将“禁用”翻转为“启用”，但是我的$ .02。 虽然没有尝试，但常识表明你可能需要在同一个“group”元素中定义一个非活动部分，为拖动动作提供一个“句柄”……否则这些点击可能会被无情地误认为是意图选择/编辑……

Answer 4

试试这个。 您可以使用Ctrl + Click进行多选和排序

http://jsfiddle.net/r83vrm0q/

Answer 5

如果你想选择多个元素并将它们全部移动到另一个列表，这个小提琴效果很好：

HTML：

        
 
1- First
 
2- Second
 
3- Third
 
4- Fourth
 
5- Fifth
 
6- Sixth
 
7- Seventh
 
8- Eighth
 
 
 
1- 1
 
2- 2
 
3- 3
 
4- 4
 
5- 5
 
6- 6
 
7- 7
 
8- 8
 
 
 another album - no style for the lists inside here 
 
  

使用Javascript：

CSS：

这是修改自http://www.pieromori.com.br/snippets/sortable_with_selectable.html的例子，感谢Piero Mori。