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

我想将类名应用于正在拖动的“ghost”元素，而不是被克隆的原始元素。下面是dragstart事件的函数我在的地方：HTML5拖放：我如何定位克隆的AND原始元素？

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插件。

来源

2012-06-15 Brandon Durham

虽然我还没有真正这样做任何事情之前，对我来说这听起来像“鬼”元素，你指的是图像/画布可覆写'event.dataTransfer.setDragImage（image，xOffset，yOffset）;'。这是基于来自[MDN]的信息（https://developer.mozilla.org/En/DragDrop/Drag_Operations#dragfeedback）。 – Quantastical

绝对是真的，但我希望能够对克隆或“鬼”元素进行样式设计，而不是完全替换它......听起来像是不可能的。 –

您是否尝试过复制目标对象（在JavaScript中），将您的类添加到副本中，然后将其传入'setDragImage'方法中？虽然它声明第一个参数是图像，但我认为它确实意味着“用于生成的图像的DOM元素”。 – Quantastical

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

来源

2012-06-17 22:56:38

是的，我试图用尽可能多的原生HTML5做到这一点。 –

我看到包括jquery没有问题，它是如此强大，并且简单比普通的javascript更容易。但是你的问题，你的规则。 –

这根本不是问题 - 我实际上包含了它 - 我只是希望尽可能使用尽可能多的本地功能。 –

添加类原始的元素上，然后拖动开始后取出（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); 
}

来源

2012-06-20 04:57:32

我想过这个，它可能是最好的方式绕过它。只要你开始拖动，一开始就有闪光，但我怀疑一些CSS的调整可以处理。 –

我可能失去了一些东西，但下面的工作对我来说，让原始和拖动文本黄色背景（通过设置课程）。也许在你的具体情况中有一些东西给你一个“幽灵”副本。或者，也许它与你已经使用的一点点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>

来源

2012-06-20 05:45:24

你说：

我想一个类名适用于“鬼”元素被拖动，不这是克隆

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

如果您不想依赖jQuery，那么您将不得不从头开始编写完整的拖放功能。下面是关于如何这样做的一些教程：

JavaScript Drag and Drop Tutorial

Drag & Drop Sortable Lists w/ JavaScript

HTML5 Drag & Drop

如果我能提一个建议将是坚持瓦特/ jQuery的。从头开始跨浏览器兼容的拖放系统需要很长时间。如果你分享你的代码的其余部分，那么我可以尝试用更具体的答案来帮助你。

来源

2012-06-22 21:06:44

从下面这行代码：

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。有了它，您可以根据需要个性化助手。

来源

2012-06-24 06:38:52 albanx

对我来说，这是铬的风格的原始元素。 –

我知道这个问题是旧的，但你需要做的是创建/使用每个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/

来源

2013-11-06 20:11:56

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

回答

相关问题