更改html5拖放功能，使元素看起来附加到光标[重复]

Posted 2023-05-08

【中文标题】更改html5拖放功能，使元素看起来附加到光标[重复]

【英文标题】：Change html5 drag and drop feature so that element looks attached to cursor [duplicate]

【发布时间】：2014-09-13 06:42:36

【问题描述】：

我目前正在研究 html5 拖放。但是，我的代码正在运行，我想更改一种效果。当用户拖动元素时，拖动元素的副本应粘在光标/指针/箭头上。 html5 拖放的默认行为看起来并不真实。如果您看到 jquery UI 可拖动，则元素会随光标移动。 html5拖拽怎么添加这种效果？

下面是我的代码。

html代码

<div id="boxA">
   <div id="word1" class="word" draggable="true">HTML5</div>
   <div id="word2" class="word" draggable="true">is</div>
   <div id="word3" class="word" draggable="true">very</div>
   <div id="word4" class="word" draggable="true">useful</div>
   <div id="word5" class="word" draggable="true">indeed</div>
</div>
<div id="boxB"></div>

javascript

$('.word').on('dragstart', dragDefine);
$('#boxA').on('dragover', dragOver);
$('#boxA').on('drop', dragDrop);
$('#boxB').on('dragover', dragOver);
$('#boxB').on('drop', dragDrop);

function dragDefine(ev) 
   ev.originalEvent.dataTransfer.effectAllowed = 'move';
   ev.originalEvent.dataTransfer.setData("text/plain", ev.target.getAttribute('id'));
   ev.originalEvent.dataTransfer.setDragImage(ev.target, 0, 0);
   return true;


function dragOver(ev) 
   ev.preventDefault();


function dragDrop(ev) 
   var idDrag = ev.originalEvent.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(idDrag));
   ev.preventDefault();

jsfiddle

【参考方案1】：

您可以在 DEMO 中通过 JQuery 实现此目的。

不要忘记检查我在 Fiddle 中添加的外部文件，它们对于这种操作是必需的。

本示例应向您展示几种拖动样式，包括创建拖动项目副本所需的一种。

$(function () 
    $("#draggable").draggable(
        helper: "original"
    );
    $("#draggable2").draggable(
        opacity: 0.7,
        helper: "clone"
    );
    $("#draggable3").draggable(
        cursor: "move",
        cursorAt: 
            top: -12,
            left: -20
        ,
        helper: function (event) 
            return $("<div class='ui-widget-header'>I'm a custom helper</div>");
        
    );
    $("#set div").draggable(
        stack: "#set div"
    );
);

编辑：是的，我更改了答案，因为它不符合您的需求，现在应该可以了。

【讨论】：

我不想更改拖动图标。我想拖动一个可拖动元素的副本并在拖动时看到它。

我改变了我的答案并向你展示了应该满足你需求的例子，享受:)