Question

我目前正尝试在HTML5中使用拖放功能。因此我创建了两个div：第一个包含应该可拖动的元素，第二个应该是可以删除元素的位置。

如您所见，我想传递一些我使用dataTransfer.setData（...）设置的数据。这实际上很好，但仅适用于我拖放的第一个元素。当我尝试删除第二个元素时，我无法使用dataTransfer.getData（...）读取数据。

问题是第二个元素没有触发'dragstart'事件：

第一个元素是：dragstart - ＆gt; dragover - ＆gt;降
对于第二个元素，它只是：dragover - ＆gt;降

我希望你明白我的问题是什么。我做错了什么？

我的HTML文件（稍微简化）

<div class="container">
    <div class="row">
        <div id="FirstDiv" class="col-md-4">
            <div class="drag-element" draggable="true">Test1</div>
            <div class="drag-element" draggable="true">Test2</div>    
        </div>
        <div id="SecondDiv" class="col-md-8" style="min-height: 200px;">
        </div>
    </div>
</div>

可拖动元素的JavaScript代码：

<script>
    $('.drag-element').on('dragstart', this, function(event) {
        console.log('dragstart');
        event.originalEvent.dataTransfer.setData("test", 13);
    });
<script>

我希望拖放元素的div的Javascript代码

<script>
    $('#SecondDiv').on('dragover', this, function(event) {
        console.log('dragover');
        event.preventDefault();
        event.stopPropagation();
    });
    $('#SecondDiv').on('drop', this, function(event) {
        console.log('drop');
        event.preventDefault();
        event.stopPropagation();
        var test = event.originalEvent.dataTransfer.getData("test");
    });
<script>

干杯， metalhamster

第一次“掉落”后事件'dragstart'没有再次触发

0 个答案: