Question

我知道类似的问题已经在堆栈上得到了回答，但由于某些原因，他们的解决方案对我不起作用。我正在尝试创建一个简单的拖放游戏/活动。用户只能尝试拖动一个元素，所以如果拖动一次，我想删除相关的拖动事件监听器。希望它有意义。这是代码：

HTML

<div id="boxes">
 <div id="b1" class="box" draggable="true"><header>Vacuum Tubes</header></div>
 <div id="b2" class="box" draggable="true"><header> Eniac</header></div> 
 <div id="b3" class="box" draggable="true"><header> Transistors </header> </div> 
 <div id="b4" class="box" draggable="true"><header> Integrated Cicuits</header> </div>
 <div id="b5" class="box" draggable="true"><header> Microprocessor </header> </div>
</div>

在init函数中，我将事件侦听器添加到我想稍后拖动的元素中。

function init(){
 cols = document.querySelectorAll('#boxes div.box');
 [].forEach.call(cols, function(col) {
 boxes.push(col);
 states.push("false");
 col.addEventListener('dragstart', handleDragStart, false);
 col.addEventListener('dragend', handleDragEnd, false);}
}

* * 框，状态和列是在init（）函数之外定义和声明的数组

在处理元素删除的函数中，我有以下代码

dragSrcEl.removeEventListener('dragstart', handleDragStart, false);
dragSrcEl.removeEventListener('dragend', handleDragEnd, false);
cols[i].removeEventListener('dragstart', handleDragStart, false);
cols[i].removeEventListener('dragend', handleDragEnd, false);
cols[i].draggable=false;
dragSrcEl.draggable=false;

所以你可以看到我试图阻止这个元素以三种不同的方式拖动。而且，它不起作用。用户仍然可以拖动元素。我的问题1：如何删除'dragstart'和'dragend'事件监听器？我的问题2：为什么我的代码不起作用？

谢谢你的帮助。 J

Answer 1

首先，尝试检查语法。我把你的js放到jsfiddle并运行解释器。当您查看console.log时，您会看到语法错误。

function init(){
cols = document.querySelectorAll('#boxes div.box');
[].forEach.call(cols, function(col) {
    boxes.push(col);
    states.push("false");
    col.addEventListener('dragstart', handleDragStart, false);
    col.addEventListener('dragend', handleDragEnd, false);
}); /* <--- Check this here. */
}
init();
console.log($('#boxes > div.box'));

然后当我在jslint之后运行它（表示没问题）时，你的推送函数只有一个TypeError。

干杯悠闲

Answer 2

浏览器的行为存在很大差异。唯一一个我能想到的行为就像你期望的那样是Firefox。

可拖动属性本身足以允许拖动Internet Explorer，Edge和Chrome。另一方面，在调用event.dataTransfer.setData（mimetype，valuestring）之前，Firefox不会进入拖动模式。对于选定的文本和图像，这会自动发生，这就是为什么它们可以神奇地拖动。

因此，对于FF来设置值，你必须有一个dragStart处理程序，一旦你有一个处理程序，它必须返回true或你仍然不会得到拖动模式。

要获得统一的跨浏览器行为，您必须以FF方式执行此操作并设置draggable的值以指示是否要开始拖动，以便抑制对IE，Edge和Chrome的拖动。返回false也可能有效，但你必须检查它。

删除事件侦听器不起作用。为什么？

2 个答案: