HTML5のドラッグ＆Iは、プロジェクトに実装するためのドラッグ＆ドロップを勉強していたアクセス属性

Question

をドロップし、あなたがこのCodePen上で見ることができるように、それはHTML5を使用して動作するようになったが、私は私のプロジェクトで使用することがより複雑にする必要があり、特別にドラッグされたオブジェクトのデータプロパティにアクセスすることができます。

この

は、私は5が必要になるでしょう、私は私のプロジェクトに（ドラッグされたdiv要素の 'データ・someDataが' 属性にアクセスする必要がJS

function dragCheck(ev) { 
    console.log("im dragging"); 
} 

function dragStart(ev) { 
    console.log('drag start'); 
    ev.dataTransfer.setData("text", "this is some text"); 
} 

function dragover(ev) { 
    ev.preventDefault(); 
    // Set the dropEffect to move 
    ev.dataTransfer.dropEffect = "move" 
} 

function drop(ev) { 
    ev.preventDefault(); 
    console.log('drop'); 
    var data = ev.dataTransfer.getData('text'); 
    $('#secTwo').append('hahaaha'); 
} 

HTML

<section class="sectionOne"> 

    <div draggable="true" class="sec-one-div" ondrag="dragCheck(event);" ondragstart="dragStart(event);" data-somedata="300"> 
     <p>This is section one</p> 
    </div> 

    </section> 
<section class="sectionTwo" ondrop="drop(event);" ondragover="dragover(event);" id="secTwo"> 

    <p>This is section two</p> 

</section> 
<section class="sectionThree" > 

    <p>This is section three</p> 

</section> 

です彼らの今1がどうなるのために）私は別の要素の正しい値を追加できるようにします。どうやってやるの？ documentation

が、私はこの結果を得るために使用すべきものを私に明確ではなかった、すべてのヘルプは大歓迎です。より多くの情報が必要な場合は、私に知らせてください。

Answer 1

イベントがターゲットドラッグされた要素が含まれているので、あなたが使用してその要素の属性を取得することができます：jQueryを使って

function dragCheck(ev) { 
    console.log("im dragging"); 
    console.log(ev.target.getAttribute("data-someinfo")); 
} 

か：

function dragCheck(ev) { 
    console.log("im dragging"); 
    console.log($(ev.target).attr('data-someinfo')); 
}