jQuery可排序 – 保持原始列表

前端之家收集整理的这篇文章主要介绍了jQuery可排序 – 保持原始列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有人知道jQuery UI的Sortable是否具有内置功能,可以将原始丢弃的项目保留在原始列表中?

例如,您有两个列表(一个“源”和一个“组”).我想从源代码中选择并放入组中,但将该项保留在源中.

合理?

谢谢!

解决方法

你可以 see my solution in action on jsfiddle.我只是修改 this jQuery draggable/droppable interaction,以满足您的需要.

HTML

<div class="demo">
    <h2>List 1</h2>
    <ul>
        <li class="draggable ui-state-highlight">Drag me down</li>
        <li class="draggable ui-state-highlight">Drag me down</li>
    </ul>
    <h2>List 2</h2>
    <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</div>

jQuery的

$(function() {
    $("#sortable").sortable({
        revert: true
    });
    $(".draggable").draggable({
        connectToSortable: "#sortable",helper: "clone",revert: "invalid"
    });
    $("ul,li").disableSelection();
});

CSS

.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }
.demo li { margin: 5px; padding: 5px; width: 150px; border: 1px solid black; }

猜你在找的jQuery相关文章