带手柄的拖放

Posted 2023-05-08

【中文标题】带手柄的拖放

【英文标题】：Drag drop with handle

【发布时间】：2014-12-04 16:37:59

【问题描述】：

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

我不知道如何用手柄做到这一点。请多多指教。

【参考方案1】：

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

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

#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;

<h1>Drag Handle</h1>

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

【讨论】：

哇，谢谢，这太酷了，虽然放置时 div 没有移动，但可以添加吗？还可以在用户移动时添加幻灯片动画吗？

没想到你还需要这个老问题的答案，哈哈！偶然发现它并决定无论如何都要回答它。关于丢弃，请看这里的一些示例代码的答案：***.com/questions/6230834/…

我采用了另一种方式，它更加密集（在 mousedown 上我添加了 mousemove 侦听器，在 mousemove 上我将设置 elment left,top 并且它很好地跟随光标动画方式），你的方式非常好，我觉得更有表现力，我很想适应它。

如果您不关心在拖动的磁贴中复制/粘贴任何内容，这是一个很好的解决方案。如果您确实关心这一点，那么此版本不适合您。

【参考方案2】：

我稍微修改了 SaphuA 的答案以允许突出显示文本。

诀窍是在拖动句柄获得mousedown 事件之前不要添加draggable 属性。

这是一个演示：https://jsfiddle.net/a6tgy9so/1/

【讨论】：

哦，这是一个重要的分享。而是接受了这个答案。感谢分享！

好主意！也感谢@SaphuA 的原创想法

点击手柄时有一个bug（不移动，直接点击），然后draggable属性保持true。

@Traxo 我已经更新了演示，现在有一个 mouseup 处理程序来防止这种情况

@user1343035 在这种情况下，您需要更改拖动元素的 CSS 位置。见this example from MDN that I modified（original is here）