拖放与处理

我有一个div，其中包含16x16px的跨度。我希望拖动事件在用户单击并拖动此图标时启动，但它应拖动整个div。我试图按照这个教程在这里：http://www.html5rocks.com/en/tutorials/dnd/basics/拖放与处理

我不能弄清楚如何做到这一点与句柄。请指教。

来源

2014-10-09 Noitidart

这里有一个工作示例：https://jsfiddle.net/pwt1cbjc/

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Drag Handle</title> 
    <style> 
     #draggable { 
      width: 100px; 
      height: 100px; 
      border: 1px solid black; 
     } 
     #handle { 
      width: 0; 
      height: 0; 
      border-right: 20px solid transparent; 
      border-top: 20px solid black; 
      cursor: move; 
     } 
    </style> 
</head> 
<body> 
    <h1>Drag Handle</h1> 

    <div id="draggable" draggable="true"> 
     <div id="handle"> 
     </div> 
    </div> 

    <script> 
     var draggable = document.getElementById('draggable'); 
     var handle = document.getElementById('handle'); 
     var target = false; 
     draggable.onmousedown = function(e) { 
      target = e.target; 
     }; 
     draggable.ondragstart = function(e) { 
      if (handle.contains(target)) { 
       e.dataTransfer.setData('text/plain', 'handle'); 
      } else { 
       e.preventDefault(); 
      } 
     }; 
    </script> 

</body> 
</html>

来源

2015-06-23 13:32:02 SaphuA

哇谢谢你这是冷静，在div上没有一滴感动，虽然，是有可能添加？还有可能随用户移动添加幻灯片动画？ – Noitidart 2015-06-23 15:24:58

没想到你还需要这个老问题的答案，哈哈！无意中碰到它并决定回答它。关于删除，看看这里的答案在这里的一些示例代码：http://stackoverflow.com/questions/6230834/html5-drag-and-drop-anywhere-on-the-screen – SaphuA 2015-06-24 07:18:18

我以另一种方式去了解它，它更加密集（在mousedown上我添加了mousemove监听器，并且在mousemove上我会设置elment'left'，'top'，并且它以很好的动画方式跟随光标），你的方式非常好，我感觉更高性能，我很乐意去适应它。 – Noitidart 2015-06-24 14:17:51

回答

相关问题