HTML/JavaScript拖放功能

问题描述：

请帮助我使用拖放功能吗？所需的行为，即：HTML/JavaScript拖放功能

拖拽功能后，长点击（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)); 
    }

请，你有什么秘诀如何扩大它需要的行为？

谢谢你的任何想法。

答

解决！通过使用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"); 
    } 
    }); 
});

HTML/JavaScript拖放功能

相关推荐