Question

我只使用HTML5拖放功能。我已经通过JQuery UI使用它，但现在需要通过清晰的HTML5 API来完成它。

像我刚才说的那样：只有拉开火把。其余的事件我没有抓住。在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（正确数据）和点击功能。

我故意插入点击结果以检查Widget_dest的属性是否正确。单击事件触发，其余事件不触发。

我会非常感谢任何帮助维克多

Answer 1

您不应该在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));
    });

在HTML5中，只拖放dragstart fires

1 个答案: