jQuery Sortable-保留在原始列表中 [英] jQuery Sortable - Keep it in original list

问题描述

有人知道jQuery UI的Sortable是否具有内置功能以将原始放置的项目保留在其原始列表中吗?

Does anyone know if jQuery UI's Sortable has built-in functionality to keep the original dropped item in it's original list?

例如，您有两个列表(一个源"和一个组").我想从源中选择并放入组中，但将其保留在源中.

For example, you have two lists (one 'source' and one 'group'). I'd like to select from the source and drop into the group, but keep the item in the source.

有道理吗?

谢谢！

推荐答案

您可以查看我在jsfiddle上的解决方案.我只是修改了此jQuery可拖动/可拖放交互，以满足您的需求.

You can see my solution in action on jsfiddle. I simply amended this jQuery draggable/droppable interaction to suit your needs.

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 Sortable-保留在原始列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！