Question

我目前正在进行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

Answer 1

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

不要忘记检查我在小提琴中添加的外部文件，它们对于这种操作是强制性的。

此示例应显示几种拖动样式，包括创建拖动项目副本所需的样式。

$(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"
    });
});

编辑：是的，我改变了我的答案，因为它不符合您的需求，现在应该没问题。

更改html5拖放功能，以便元素看起来附加到光标

1 个答案: