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

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