已解決430363個問題，去搜搜看，總會有你想問的

html5中的拖拽drop不是在盛放拖放元素的里面設置drop的監聽？

首頁猿問 html5中的拖拽drop不是在盛...

html5中的拖拽drop不是在盛放拖放元素的里面設置drop的監聽？

JavaScript

拉莫斯之舞 2018-11-14 13:10:10

我想將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上的一個元素這是寫的測試代碼：剛剛測試了下Firefox上，貌似在B上是可以監聽到Drop的，但是chrome上卻不能！請問這個有解決辦法嗎？

查看完整描述

1 回答

九州編程

TA貢獻1785條經驗獲得超4個贊

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對象比較。。。難受

反對回復 2018-12-07

1 回答
0 關注
516 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

html5中的拖拽drop不是在盛放拖放元素的里面設置drop的監聽？

html5中的拖拽drop不是在盛放拖放元素的里面設置drop的監聽？

1 回答

添加回答

html5中的拖拽drop不是在盛放拖放元素的里面設置drop的監聽？