html - HTML5 拖放：如何定位克隆和原始元素？

Question

我想将类名应用于被拖动的“幽灵”元素，而不是被克隆的原始元素。这是我为该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 插件。

score 7 · Accepted Answer

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

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

score 2 · Accepted Answer

我不是一个狂热的 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。

score 2 · Accepted Answer

我知道这个问题很老，但是您需要做的是根据https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer创建/使用可见元素（或图像/画布等） #setDragImage.28.29

因此，您可以获取当前拖动的元素（this通常在事件上下文中），克隆它，将其添加到 dom（确保它是“可见的”，也就是不display: none或visibility:hidden），然后您可以对其应用一个类，以便您可以定位拖动的项目本身在 css 中。然后，将该元素添加为第一个参数，e.dataTransfer.setDragImage()浏览器将使用它。

请记住稍后将其删除 ( dragend) 或以某种方式隐藏它。

这是一个可以看到它的小提琴：http: //jsfiddle.net/6TDvz/

score 1 · Accepted Answer

从这行代码：

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

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

score 0 · Accepted Answer

我可能遗漏了一些东西，但以下内容对我有用，为原始文本和拖动的文本都提供了黄色背景（通过设置类）。也许在您的特定情况下有些东西给了您一个“幽灵”副本。或者它可能与您已经在使用的少量 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>

score 0 · Accepted Answer

你说：

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

好吧，通过正常的拖放，没有原始元素与克隆元素，只有被拖动的元素。没有看到其余的拖放实现，没有办法给你答案。我们不知道正在调用什么“事件”。如果您的dragStart活动是，HTML5 ondragstart event那么本文可能会帮助您。但是，如果它是由 jQuery 或其他框架创建的自定义事件，那么除非您共享其余代码，否则任何人都无法告诉您如何获取原始元素和克隆元素。

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

JavaScript 拖放教程

使用 JavaScript 拖放可排序列表

HTML5 拖放

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