9拖放:不以div为目标的拖放事件
9拖放:不以div为目标的拖放事件
提问于 2014-09-03 11:46:12
我有几个div，它们是水平的和可拖的。每个div的内部总是一个输入+一些动作按钮。目标是允许用户通过拖放更改div的顺序。除了IE9之外，它在所有浏览器中都运行良好，这与将当前元素删除到其新位置有问题。
当我在div上释放鼠标时，它就不能工作了。但是如果我在div中的按钮或输入字段上释放鼠标，它就可以正常工作了。
参见实际操作：http://jsfiddle.net/aouamurj/
拖放的魔力从第181行开始。试着用子弹按下最后一个按钮，把它拖到另一个div上。在Chrome中，它可以正常工作，但是在IE9中，您需要将元素放在按钮或输入字段上。
<!-- One div with a input and button inside. The button should initialize the drag -->
<div class="survey-question" draggable="true">
<input type="text" name="q1" value="1" tabindex="1">
<button type="button" title="Drag and drop question" data-action="drag" data-application="survey">●</button>
</div>JavaScript (重要部分)
button.addEventListener("dragstart", dragStart);
button.addEventListener("drop", dragStop);
button.addEventListener("mousemove", handleDragMouseMove);
function dragStart(e) {
this.dragSrcEl = e.target.parentNode;
this.dragSrcElVal = e.target.parentNode.children[0].value;
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text", e.target.parentNode.innerHTML);
},
function dragDrop(e) {
e.stopPropagation();
if (this.dragSrcEl != e.target.parentNode) {
if (e.target.parentNode.classList.contains("survey-question")) {
this.dragSrcEl.children[0].value = e.target.parentNode.children[0].value;
e.target.parentNode.innerHTML = e.dataTransfer.getData("text");
}
}
return false;
}
function handleDragMouseMove(e) {
if (window.event.button === 1) {
e.target.dragDrop();
}
}我怎么才能避免这种情况？
回答 1
Stack Overflow用户
发布于 2014-09-03 11:56:28
您必须启用拖放功能到您的浏览器IE。
请按照此步骤为IE启用拖放操作。
- 转到Tools。
- ->转到互联网选项。
- ->转到Security选项卡。
- ->点击自定义级别.
- ->搜索，拖放设置并单击“启用”。
- ->单击Ok。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25643478
复制相关文章
相似问题
腾讯云开发者
