將元素從可排序列表拖放到不可排序塊

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

編碼愉快！