HTML/JavaScript拖放功能

Question

請幫助我使用拖放功能嗎？ 所需的行爲，即：

• 拖拽功能後，長點擊（2000毫秒）將啓動，
• ，如果我將移動拖格，別人會搬出它的方式（使空間在那裏我可以算了吧）。
• 它應該可以放在同一個架子上，也可以放在另一個架子上。
• 當我按下Esc鍵的同時拖動，它會跳右後衛（現在運轉）

我使用HTML5原生拖曳功能，但我不知道怎麼長按和下跌後啓用功能不起作用。

可拖動div有<div class="file" draggable="true" ondragstart="drag(event)">

的 「拖放區域」 具有<div class="shelf" id="shelf1" ondrop="drop(event)" ondragover="allowDrop(event)">

而且拖放JS是：

function allowDrop(ev) { 
    ev.preventDefault(); 
    } 
    function drag(ev) { 
     ev.dataTransfer.setData("text", ev.target.id); 
    } 
    function drop(ev) { 
     ev.preventDefault(); 
     var data = ev.dataTransfer.getData("text"); 
     ev.target.appendChild(document.getElementById(data)); 
    } 

請，你有什麼祕訣如何擴大它需要的行爲？

謝謝你的任何想法。

Answer 1

解決！通過使用jQueryUI庫http://jqueryui.com/sortable/

// For Drag and Drop is used JS library jQuery UI 
    $("#shelf1, #shelf2").sortable({ 
    connectWith: ".connectedSortable", 
    // Wait X ms before dragging will start 
    delay: 100, 
    classes: { 
     "ui-sortable-helper": "draggable-chosen" 
    } 
    }).disableSelection(); 

    // When the Esc is pressed, return to original position 
    $(document).keyup(function(e) { 
    if (e.which === 27 || e.keyCode === 27) { 
     $("#shelf1, #shelf2").sortable("cancel"); 
    } 
    }); 
});