Question

我正在开发一个界面，要求我从一个无序列表拖放到另一个无序列表中的占位符。但是，即使元素已经存在，我也需要能够对丢弃进行排序。

解释这个的最简单方法是我们要在drop上替换现有元素，并将其他子项向下或向上推到最近的空父元素。

提前致谢！

JavaScript的：

$(".draggable").draggable({
    revert: "invalid"
    // start: function(ev, ui){ ui.helper.width($(this).width()); }
});

$(".droppable").droppable({
    accept : ".draggable",
    tolerance: 'pointer',
    greedy : true,
    hoverClass: 'highlight',
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({position : 'relative', top: 'auto',left: 'auto'}).appendTo(this);
    }
});

HTML

<h1>jQuery Drag, Drop, &amp; Reorder</h1>

<div id="left" class="left">

    <h2>Drag from this side</h2>

    <ul>
        <li class="list-item"><span class="draggable">A</span></li>
        <li class="list-item"><span class="draggable">B</span></li>
        <li class="list-item"><span class="draggable">C</span></li>
        <li class="list-item"><span class="draggable">D</span></li>
        <li class="list-item"><span class="draggable">E</span></li>
        <li class="list-item"><span class="draggable">F</span></li>
        <li class="list-item"><span class="draggable">G</span></li>
        <li class="list-item"><span class="draggable">H</span></li>
        <li class="list-item"><span class="draggable">I</span></li>
        <li class="list-item"><span class="draggable">J</span></li>
        </ul>
    </div>

<div id="right" class="right">

    <h2>to this side</h2>

    <ul>
        <li class="list-item droppable"></li>
        <li class="list-item droppable"></li>
        <li class="list-item droppable"></li>
        <li class="list-item droppable"></li>
        <li class="list-item droppable"></li>
        <li class="list-item droppable"></li>
        <li class="list-item droppable"></li>
        <li class="list-item droppable"></li>
        <li class="list-item droppable"></li>
        <li class="list-item droppable"></li>
    </ul>
</div>

jQueryUI：如何拖动到可放置的占位符，替换现有元素，然后移动现有的已删除项

0 个答案: