javascript - html5中的拖拽drop不是在盛放拖放元素的里面设置drop的监听?
本文介绍了javascript - 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上的一个元素
这是写的测试代码:
//拖拽功能的实现
let dragElements = document.querySelectorAll('.drag');//被拖拽对象
let elementDragged = null;
let dropElements = document.querySelectorAll('.drop');//拖拽对象盛放容器
for (let i = 0;i<dragElements.length;i++){
//开始拖拽
dragElements[i].addEventListener('dragstart',function (e) {
e.dataTransfer.setData('text',$(this).find('p').text());
elementDragged = this;
});
dragElements[i].addEventListener('dragend',function (e) {
elementDragged = null;
console.log('dragend',this,e.target)
});
dragElements[i].addEventListener('drag',function (e) {
// console.log('drag')
});
dragElements[i].addEventListener('dragover',function (e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
// console.log('dragover',this)
});
dragElements[i].addEventListener('drop',function (e) {
e.preventDefault();
e.stopPropagation();
let targetText = e.dataTransfer.getData('text');
console.log('drop',e.target);
return false;
})
}
for(let i = 0;i<dropElements.length;i++){
dropElements[i].addEventListener('dragenter',function (e) {
e.preventDefault();
e.stopPropagation();
console.log('dragenter',this)
});
dropElements[i].addEventListener('dragleave', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('dragleave',this)
});
dropElements[i].addEventListener('drop',function (e) {
e.preventDefault();
e.stopPropagation();
let targetText = e.dataTransfer.getData('text');
console.log('drop',this);
return false;
})
}
刚刚测试了下Firefox上,貌似在B上是可以监听到Drop的,但是chrome上却不能!请问这个有解决办法吗?
这个问题已被关闭,原因:问题已解决 - 问题已解决,且对他人无借鉴意义
解决方案
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对象比较。。。难受
这篇关于javascript - html5中的拖拽drop不是在盛放拖放元素的里面设置drop的监听?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文