0

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

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：
为什么我的代码不起作用？

4

2 回答 2

0

首先，尝试检查您的语法。我将您的 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 之后运行它（它说没关系）时，你的 push 函数只有一个 TypeError 。

干杯悠闲

于 2012-06-14T22:38:19.687 回答
0

浏览器之间的行为存在很大差异。我能想到的唯一一个符合您期望的行为方式是 Firefox。

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

所以要让 FF 设置值，你必须有一个 dragStart 处理程序，一旦你有一个处理程序，它必须返回 true，否则你仍然不会获得拖动模式。

要获得统一的跨浏览器行为，必须采用 FF 方式，并设置 draggable 的值来指示是否开始拖动，以抑制在 IE、Edge 和 Chrome 上的拖动。返回 false 也可能有效，但您必须检查一下。

于 2017-10-26T08:44:35.467 回答