問題描述

我想將A拖到B中，用了HTML5 的拖拽方法A是被拖拽的元素，B是打算盛放拖拽的元素在a中設(shè)置了dragstart,dragend在b中設(shè)置了dragenter,dragleave這是沒有什么疑惑的。但是對(duì)于drop的監(jiān)聽，本以為是在B，這個(gè)盛放拖拽元素上設(shè)置的監(jiān)聽，可是一直觸發(fā)不了

發(fā)現(xiàn)拖拽A，在A中松開鼠標(biāo)的時(shí)候，可以觸發(fā)A上的drop監(jiān)聽。

難道不是在B中監(jiān)聽元素的放入這個(gè)動(dòng)作嗎？

現(xiàn)在我將A拖入B再松開，觸發(fā)的是dragenter,dragleave,dragend

但是如果我拖動(dòng)A，在A上松開，就可以觸發(fā)了drop了，并且e.target是我放在A上的一個(gè)元素

這是寫的測(cè)試代碼：

//拖拽功能的實(shí)現(xiàn)let dragElements = document.querySelectorAll(’.drag’);//被拖拽對(duì)象let elementDragged = null;let dropElements = document.querySelectorAll(’.drop’);//拖拽對(duì)象盛放容器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; })}

剛剛測(cè)試了下Firefox上，貌似在B上是可以監(jiān)聽到Drop的，但是chrome上卻不能！請(qǐng)問這個(gè)有解決辦法嗎？

問題解答

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必須得轉(zhuǎn)成原生的event才能拿到dataTransfer對(duì)象比較。。。難受

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