Question

我正在学习Drag and Drop来实现一个项目，正如你在CodePen看到的那样使用HTML5让它工作但是我需要它在我的项目中使用起来更复杂，特别是为了能够访问被拖动对象的数据属性。

这是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>

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');
}

我需要访问被拖动的div的'data-somedata'属性（在我的项目中我需要其中的5个，但现在1将会这样做）以便我可以在另一个元素上附加正确的值。我怎么能这样做？

documentation我不清楚我应该用什么来获得这个结果，所有的帮助表示赞赏。如果需要更多信息，请告诉我。

Answer 1

该事件包含目标拖动元素，因此您可以使用以下方法获取该元素的属性：

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

或使用jQuery：

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

HTML5拖放访问属性

1 个答案: