Javascript拖放 - 你必须使用dragover?

时间:2015-05-26 01:25:34

标签: javascript html5 drag-and-drop

我正在试图弄清楚如何正确地进行拖放操作,而且从我在MDN上阅读的内容来看,听起来我应该能够通过dragenter来指示该元素上可能存在丢弃。我根本无法让它工作,但当我切换到拖动时,它似乎开始工作。我真的不想注册一个dragover事件处理程序,因为每次鼠标在一个区域内移动时我都不需要调用它。有没有办法完全避免注册dragover处理程序进行拖放?

这就是我与dragover合作的事情:

<div id="main">
    <div id="a" draggable="true">a</div>
    <div id="c">b</div>
</div>

<style>
    div {
        display: inline-block;
        border: 1px solid black;
    }
    #c {
        height: 100px;
        width: 100px;
    }


</style>

<script type='text/javascript'>
    var a = document.getElementById('a')
    var c = document.getElementById('c')

    a.addEventListener('dragstart', function(event) {
        var dt = event.dataTransfer;

        dt.setData("object/jsObject", {test:1});
        dt.setData("text/plain", "test one");
    })
    c.addEventListener('dragover', function(event) {
        if(event.preventDefault){
            event.preventDefault();
        }
        console.log(event)
    })
    c.addEventListener('drop', function(event) {
        console.log(event)
        c.innerHTML = 'dropped '+event.dataTransfer.getData(event.dataTransfer.types[0])
        event.dataTransfer.dropEffect = 'move';
    })

</script>

有没有办法用dragenter取代dragover?

更新:

哦,这里有一些有趣的东西,显然是HTML5拖放api is absolute shite。我自己也开始得出这个结论了。

0 个答案:

没有答案