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原始元素？

回答

相關問題