将元素从可排序列表拖放到不可排序块

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(); 
    }); 

编码愉快！