猿问

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

我想将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上的一个元素

这是写的测试代码:

https://img4.mukewang.com/5c0a145e000178d205830931.jpg

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


拉莫斯之舞
浏览 526回答 1
1回答

九州编程

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对象比较。。。难受
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答