Question

我想将类名应用于被拖动的“ghost”元素，而不是克隆的原始元素。以下是dragstart事件所具有的功能：

function dragStart(event) {
    event.originalEvent.dataTransfer.effectAllowed = 'move';
    event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
    console.log(event);
    console.log('Dragging...');
    $(event.currentTarget).addClass('dragging');
    return true;
}

$(event.currentTarget).addClass('dragging');行将.dragging类添加到原始元素，但不添加克隆的拖动元素。

如何正确定位两者？

修改

希望尽可能使用原生HTML5处理此问题。不想使用jQuery插件。

Answer 1

在原始元素上添加类，然后在拖动开始后将其删除（demo）：

function dragStart(event) {
    var el = $(this);

    event.originalEvent.dataTransfer.effectAllowed = 'move';
    event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));

    el.addClass('dragging');
    setTimeout(function() { el.removeClass('dragging'); }, 0);
}

Answer 2

我不是一个狂热的JavaScript脚本编写者，但是我在试图为您找到一些东西时偶然发现了这个页面，它可能就是您所需要的，特别是代理拖动版本：

http://threedubmedia.com/demo/drag/

$('#demo6_box')
        .bind('dragstart',function( event ){
                if ( !$(event.target).is('.handle') ) return false;
                return $( this ).css('opacity',.5)
                        .clone().addClass('active')
                        .insertAfter( this );
                })
        .bind('drag',function( event ){
                $( event.dragProxy ).css({
                        top: event.offsetY,
                        left: event.offsetX
                        });
                })
        .bind('dragend',function( event ){
                $( event.dragProxy ).remove();
                $( this ).animate({
                        top: event.offsetY,
                        left: event.offsetX,
                        opacity: 1
                        })
                });

这都是jQuery。

Answer 3

我知道这个问题很旧，但您需要做的是按https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#setDragImage.28.29

创建/使用可见元素（或图像/画布等）

所以，你可以把你当前的拖动元素（通常是事件上下文中的this），克隆它，添加到dom（确保它是“可见的”，又名display: none或{ {1}}）然后您可以将一个类应用于它，以便您可以在css中定位拖动的项目本身。然后，将该元素添加为visibility:hidden的第一个参数，浏览器将使用该元素。

请记得稍后将其删除（e.dataTransfer.setDragImage()）或以某种方式隐藏它。

这是一个小小的动作：http://jsfiddle.net/6TDvz/

Answer 4

从这行代码：

event.originalEvent

好像你在使用jquery？因此，只需考虑jquery使事情变得更容易，并且跨浏览器兼容。

HTML5本机和jquery方法（仅使用javascript）实现拖动几乎相同。 HTML5仅添加了拖动事件，但仅添加了拖放方法：

没有jquery：

function dragStart(event) {
    event.originalEvent.dataTransfer.effectAllowed = 'move';
    event.originalEvent.dataTransfer.setData("text/plain", event.target);//JUST ELEMENT references is ok here NO ID
    console.log(event);
    console.log('Dragging...');

    var clone = event.target.cloneNode(true);
    event.target.parentNode.appendChild(clone);
    event.target.ghostDragger = clone;//SET A REFERENCE TO THE HELPER

    $(clone).addClass('dragging');//NOW YOU HAVE A CLONE ELEMENT JUST USE this and remove on drag stop
    return true;
}

function dragging(event){
  var clone = event.target.ghostDragger;
  //here set clone LEFT and TOP from event mouse moves
}
//ON STOP REMOVE HELPER ELEMENT
function stopDrag(event){
  var clone = event.target.ghostDragger;
  clone.parentNode.removeChild(clone);
}

使用jquery：

$( "#draggable" ).draggable({ 
 helper: "clone", //EVEN here you can set the helper you want by defining a funcition
 start:function(event, ui){
   ui.helper.addClass('yourclass');
 }
});

Althoug我建议使用jquery ui进行拖动。有了它，您可以根据需要个性化拖动助手。

Answer 5

我可能会遗漏一些内容，但以下内容适用于我，将原始文本和拖动文本都设为黄色背景（通过设置类）。也许在你的特定情况下会有一些东西给你一个“幽灵”副本。或者它可能与你已经使用的一点点jQuery有关。我只能说，在尝试重新创建问题时，我的简单测试用例实际上运行正常。

<!DOCTYPE html>
<html>
  <head>
    <title>Drag Test</title>
    <script>
      function startDrag(event) {
        var orig = document.getElementById('original');
        var dt = event.dataTransfer;

        orig.className += 'dragging';

        dt.effectAllowed = 'move';
        dt.setData('text/plain', 'This text may be dragged');
      }
    </script>

    <style>
      .dragging {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div id="original"  draggable="true" ondragstart="startDrag(event);">
      This text may be dragged.
    </div>
  </body>
</html>

Answer 6

你说：

我想将类名应用于被拖动的“ghost”元素，而不是克隆的原始元素

嗯，正常的拖放没有原始vs克隆元素，只有被拖动的元素。如果没有看到拖放实现的其余部分，就无法给出答案。我们不知道正在调用什么“事件”。如果您的dragStart事件是HTML5 ondragstart event，那么this article可能会帮助您解决问题。但是如果它是由jQuery或其他框架创建的自定义事件，则除非您共享其余代码，否则任何人都无法告诉您如何获取原始元素和克隆元素。

如果您不想依赖jQuery，那么您将不得不从头开始编写整个拖放功能。以下是一些如何操作的教程：

JavaScript Drag and Drop Tutorial

Drag & Drop Sortable Lists w/ JavaScript

HTML5 Drag & Drop

如果我可以提出建议，那就是坚持w / jQuery。从头开始构建跨浏览器兼容的拖放系统需要大量时间。如果您分享其余代码，那么我可以尝试为您提供更具体的答案。

HTML5拖放：如何定位克隆的AND原始元素？

6 个答案: