javascript - 在HTML5中，只有dragstart会触发

我只使用HTML5拖放。我已经用JQuery UI做过了，但现在需要清除HTML5 API。
就像我刚才说的：只有dragstart才会开火。剩下的事情我都不知道。在dragstart函数中，一切似乎都正常：event.dataTransfer获取数据，我检查了它。
代码如下：

$('#widget')
    .attr('draggable', 'true')
    .on('dragstart', function(event) {
        event.preventDefault();
        event.dataTransfer.effectAllowed = "move";
        event.dataTransfer.setData('text/html', $(this).attr('id'))
        event.dataTransfer.setDragImage(event.target, 24, 32);
        console.log('Im draggable');
        console.log(event.dataTransfer.getData('text/html'));
    })
    .on('dragend', function(event) {
        event.preventDefault();
        /*$(this).css('top', event.pageX + "px");
        event.dataTransfer.getData('text/html');*/
        console.log('dragend');
    });

$('#widget_dest')
    .click(function(event) {
        console.log("click widget_dest");
    })
    .on('dragenter', function(event) {
        event.preventDefault();
        console.log("dragenter");
    })
    .on('dragover', function(event) {
        event.preventDefault();
        console.log("dragover");
    })
    .on('drop', function(event) {
        event.preventDefault();
        event.stopPropagation();

        console.log("drop");

        var data = event.dataTransfer.getData('text/html');
        $(this).append($('#' + data));
        $('#' + data).css('top', event.pageX + 'px');
    });
});

我得到的唯一日志是：dragstart（正确的数据）和click函数。
我特意插入了click finction来检查Widget的属性是否正确。单击事件激发，其余事件不激发。
我会非常感谢你的帮助
胜利者

最佳答案

您不应该在event.preventDefault()中使用dragstart。这个例子很好：http://jsfiddle.net/noziar/Q3eh3/4/
另外，即使我在大多数地方删除了event.preventDefault()，也要注意在dragover中这是必要的，否则drop可能不会触发（至少在Chrome中）。
另外，我不确定如何读取/设置event.dataTransfer上的属性，因为jQuery事件没有dataTransfer属性-您可以使用originalEvent来读取/设置属性。
这是我的代码：
HTML格式：

<div id="widget">I'm a widget</div>
<div id="widget_dest">
    <span id="widget_box_title">Drag widgets into this box</span>
</div>

CSS:

#widget_dest {
    position:absolute;
    top: 40px;
    border-style:solid;
    border-width:1px;
}
#widget {
    color:green;
}
#widget_box_title {
    color:red;
}

JS公司：

$('#widget')
    .attr('draggable', 'true')
    .on('dragstart', function(event) {
        var original = event.originalEvent;
        original.dataTransfer.effectAllowed = "move";
        original.dataTransfer.setData('Text', $(this).attr('id'))
        original.dataTransfer.setDragImage(event.target, 24, 32);
        console.log('Im draggable');
        console.log(original.dataTransfer.getData('Text'));
    })
    .on('dragend', function(event) {
        $(this).css('top', event.pageX + "px");
        event.originalEvent.dataTransfer.getData('Text');
        console.log('dragend');
    });

$('#widget_dest')
    .click(function(event) {
        console.log("click widget_dest");
    })
    .on('dragenter', function(event) {
        console.log("dragenter");
    })
    .on('dragover', function(event) {
        event.preventDefault();
        console.log("dragover");
    })
    .on('drop', function(event) {
        console.log("drop");
        var data = event.originalEvent.dataTransfer.getData('Text');
        $(this).append($('#' + data));
    });

关于javascript - 在HTML5中，只有dragstart会触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23858737/