HTML5ドラッグ＆ドロップ：クローンされた元の要素をどのようにターゲットにしますか？

ドラッグされている "ゴースト"要素にクラス名を適用します。クローン化された元の要素ではありません。ここで私はdragstartイベントのための場所を持っている機能は次のとおりです。HTML5ドラッグ＆ドロップ：クローンされた元の要素をどのようにターゲットにしますか？

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でこれを処理するために探し

EDIT

。 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

あなたは言った：

を、私は通常で、まあ

をクローニングしたではない元の要素、ドラッグされている「ゴースト」の要素にクラス名を適用したいですドラッグアンドドロップ元と複製された要素がない場合は、要素がドラッグされているだけです。ドラッグアンドドロップの実装の残りの部分を見ることなく、あなたに答えを与える方法はありません。私たちは、どのような "イベント"が呼び出されているのか分かりません。 dragStartのイベントがHTML5 ondragstart eventの場合は、this articleが役に立ちます。しかし、jQueryや他のフレームワークで作成されたカスタムイベントの場合、コードの残りの部分を共有しない限り、元の要素と複製された要素を取得する方法は誰にも分かりません。

jQueryに依存したくない場合は、ドラッグ＆ドロップ機能全体をゼロから作成する必要があります。私はそれがjQueryの/ wを固執するだろう提案を作ることができれば

JavaScript Drag and Drop Tutorial

Drag & Drop Sortable Lists w/ JavaScript

HTML5 Drag & Drop

：ここでこれを行う方法のいくつかのチュートリアルです。クロスブラウザ対応のドラッグアンドドロップシステムを最初から作成するには、時間がかかります。コードの残りの部分を共有している場合は、より具体的な回答でお手伝いすることができます。このコード行から

出典

2012-06-22 21:06:44

：

event.originalEvent

あなたはjqueryのを使用しているようですか？だから、jQueryを使うと作業がはるかに簡単になり、クロスブラウザーとの互換性があると考えてください。

ドラッグを実装するHTML5ネイティブとjqueryメソッド（javascriptのみを使用）はほぼ同じです。私は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を使って

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を使って

：HTML5が唯一のドラッグイベントが、メソッドをドラッグ＆ドロップする方が何を追加しましたドレッシングのためのUI。それを使用すると、必要に応じてドラッグヘルパーをパーソナライズすることができます。

出典

2012-06-24 06:38:52 albanx

これは元の要素をスタイルします。 –

thisで（私はこの質問が古いですけど、何をする必要がそうhttps://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#setDragImage.28.29

ごと（など、または画像/キャンバス）目に見える要素を使用/作成され、あなたは現在、ドラッグ要素を取ることができますクローンしてDOMに追加して（「可視」であることを確認してください。display: noneまたはvisibility:hidden）、クラスを適用してドラッグしたアイテム自体をCSSでターゲティングすることができます。次に、最初の引数としてその要素をe.dataTransfer.setDragImage()に追加すると、ブラウザはその要素を代わりに使用します。

後で（dragend）を削除するか、何らかの方法で非表示にしてください。ここで

は、アクションでそれを参照するにはフィドルです：http://jsfiddle.net/6TDvz/

出典

2013-11-06 20:11:56

HTML5ドラッグ＆ドロップ：クローンされた元の要素をどのようにターゲットにしますか？

答えて

関連する問題