HTML5でソースIDを取得する方法ドラッグ＆ドロップ

完了したように画像をドラッグします。here 私はdivのIDを取得しようとしていますが、ドラッグのプロセスを開始します。どうすればいいですか？おかげさまで HTML5でソースIDを取得する方法ドラッグ＆ドロップ

2012-05-11 Semih

リンクした例では、関数drag()がイメージノードのonDragStartイベントによってトリガーされます。このイベントオブジェクトは、drag()のev引数に渡され、drag()関数がイベントのターゲット（つまり、ドラッグしている要素）へのアクセスをev.targetによって行います。

ターゲットを持っているので、ev.target.parentNodeでターゲットの親ノードにアクセスでき、ev.target.parentNode.id経由で親ノードのIDにアクセスできます。

出典

2012-05-11 01:28:37

thxです。ええ、それは働いた。 – Semih

ev.srcElement.idをdrag()に覚えていると思います。 drop()では、ブラウザーの外に何かが表示されている可能性があります。ソースIDを取得するにはdrag()の責任が必要です。

出典

2012-05-11 01:14:05 Amadan

これは私にとってはうまくいきました。w3schools.comの例を改訂しました。

ドラッグされたアイテム、ソース、ターゲットのidのconsole.logを表示するには、Javascriptコンソールを開きます。

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <style> 
    .dropbox { 
     width: 350px; 
     height: 70px; 
     padding: 10px; 
     border: 1px solid #aaaaaa; 
    } 
    </style> 
    <script> 
    function addEventToClass(cls, fx, node = document, e = 'click') { 
    Array.from(node.querySelectorAll('.' + cls)).forEach(elem => elem.addEventListener(e, fx)); 
    } 

    function clickEvent(ev) { console.log('clicked item:', ev.target.id); } 
    function allowDrop(ev) { ev.preventDefault(); } 

    function drag(ev) { 
    var id = ev.target.id; 
    ev.dataTransfer.setData("itemid", id); 
    var source = id ? document.getElementById(ev.target.id).parentNode.id : ''; 
    ev.dataTransfer.setData("source", source); 
    } 

    function drop(ev, target) { 
    ev.preventDefault(); 
    var item = ev.dataTransfer.getData("itemid"); 
    var source = ev.dataTransfer.getData("source"); 
    console.log('id of dragged item is:', item); 
    console.log('id of source:', source); 
    console.log('id of target:', target.id); 
    ev.target.appendChild(document.getElementById(item)); 
    } 
    </script> 
    </head> 
    <body> 

    <div id="div1" class='dropbox' ondrop="drop(event, this)" ondragover="allowDrop(event)"></div> 
    <div id="drag1" class='dragitem' draggable="true" ondragstart="drag(event, this)" width="336" height="69">Item 1</div> 
    <div id="drag2" class='dragitem' draggable="true" ondragstart="drag(event, this)" width="336" height="69">Item 2</div> 
    <div id="div2" class='dropbox' ondrop="drop(event, this)" ondragover="allowDrop(event)"></div> 

    <script> 
    addEventToClass('dragitem', clickEvent); 
    </script> 
    </body> 
    </html>

出典

2017-08-06 05:19:50 TennisVisuals

HTML5でソースIDを取得する方法ドラッグ＆ドロップ

答えて

関連する問題