问

javascript - html5中的拖拽drop不是在盛放拖放元素的里面设置drop的监听？

kuae_617 发布于 2022-11-01 02:16

html

我想将A拖到B中，用了HTML5 的拖拽方法
A是被拖拽的元素，B是打算盛放拖拽的元素
在a中设置了dragstart,dragend
在b中设置了dragenter,dragleave
这是没有什么疑惑的。
但是对于drop的监听，本以为是在B，这个盛放拖拽元素上设置的监听，可是一直触发不了

发现拖拽A，在A中松开鼠标的时候，可以触发A上的drop监听。

难道不是在B中监听元素的放入这个动作吗？

现在我将A拖入B再松开，触发的是dragenter,dragleave,dragend

但是如果我拖动A，在A上松开，就可以触发了drop了，并且e.target是我放在A上的一个元素

这是写的测试代码：

//拖拽功能的实现
        let dragElements = document.querySelectorAll('.drag');//被拖拽对象
        let elementDragged = null;
        let dropElements = document.querySelectorAll('.drop');//拖拽对象盛放容器
        for (let i = 0;i

刚刚测试了下Firefox上，貌似在B上是可以监听到Drop的，但是chrome上却不能！请问这个有解决办法吗？

2 个回答

dragover事件是添加到放置元素(b)不是拖动元素(a)的

2022-11-01 05:16 回答

布尔熊

dragElements.on('dragend',function (event) {
            elementDragged = null;
            console.log('dragend',this,event.originalEvent.target)
        });

        dropElements.on('dragover',function (e) {
            e.preventDefault();
            e.originalEvent.dataTransfer.dropEffect = 'move';
            console.log('dragover',this)
        });

        dropElements.on('drop dragdrop',function(event){
            alert('dropped');
            // console.log(event.originalEvent.dataTransfer.getData('text'))
        });

        dropElements.on('dragenter',function(event){
            event.preventDefault();
            $(this).html('drop now').css('background','blue');
        });

        dropElements.on('dragleave',function(){
            $(this).html('drop here').css('background','red');
        });

最后用jquery封装了下，就可以了。但是。。。jquery的event必须得转成原生的event才能拿到dataTransfer对象比较。。。难受

2022-11-01 05:19 回答

虚幻星际

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签