jQuery UI可排序和可选择

min*_*nur 28 jquery jquery-ui jquery-ui-sortable jquery-ui-selectable

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

mhu*_*mhu 33

刚从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; }
Run Code Online (Sandbox Code Playgroud)

HTML:

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

使用Javascript:

$( "#list" )
    .sortable({ handle: ".handle" })
    .selectable({ filter: "li", cancel: ".handle" })
    .find( "li" )
        .addClass( "ui-corner-all" )
        .prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );
Run Code Online (Sandbox Code Playgroud)

看:这个小提琴.


Val*_*Val 5

http://jsfiddle.net/t9YTB/

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

  • @minnur,谢谢你说好.投票给答案更好:) (3认同)