从可排序列表中拖动元素并拖放到不可排序的块

Question

从可排序列表中拖动一个元素并将其放到一个块中，其中元素是不可排序但可拖动的。

有没有人知道如何在Jquery中实现这种效果？

<div id="viewpot">
    <div id="sortable">
        <div class="draggable">A</div>
        <div class="draggable">B</div>
        <div class="draggable">C</div>
        <div class="draggable">D</div>
    </div>
    <div id="dropArea">
    </div>
</div>

Answer 1

使用jquery draggable ui

Answer 2

您需要制作一个列表draggable and the target sortable。

标记：

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<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>

JavaScript的：

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

快乐的编码！