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

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

编辑：是的，我改变了我的答案，因为它不符合你的需要，应该现在就可以。