Question

我通过拖放操作交换了两个div背景。它在Chrome中运行良好，但如果我在IE中运行它，那么它就会崩溃。

以下是HTML部分：

 <div class="slot" id="slot1" draggable="true" ondragstart="onDragStart(event,0)" ondragenter="onDragEnter(event,0)" ondragover="onDragOver(event)" ondrop="onDrop(event,0)" onclick="removecard(0)"></div>
 <div class="slot" id="slot2" draggable="true" ondragstart="onDragStart(event,1)" ondragenter="onDragEnter(event,1)" ondragover="onDragOver(event)" ondrop="onDrop(event,1)" onclick="removecard(1)"></div>
 <div class="slot" id="slot3" draggable="true" ondragstart="onDragStart(event,2)" ondragenter="onDragEnter(event,2)" ondragover="onDragOver(event)" ondrop="onDrop(event,2)" onclick="removecard(2)"></div>

以下是JavaScript部分：

function onDragStart(ev,a){
    ev.dataTransfer.setData("DraggingIndex",a);
}

function onDragEnter(ev,a){
    ev.preventDefault();
}

function onDragOver(ev){
    ev.preventDefault();
}

function onDrop(ev,b){
    var a = ev.dataTransfer.getData("DraggingIndex");
    slotchange(a,b);
           deckexpression(deck);
}

它在Chrome中运行良好，但在IE中，它不起作用。我想在IE中，onDragStart或onDrop函数无法处理两个参数。我的目标是操作slotchange（a，b），其中a和b是两个插槽的索引。

请教我如何在IE中解决问题。感谢。

Answer 1

您使用的是哪个版本的IE？ Internet Explorer 9+支持拖放。

这是一个onDragStart和onDrop的示例，它有2个参数，用于IE：

HTML：

<div id="div1" ondrop="drop(event, 1)" ondragover="allowDrop(event)"></div>
<div class='slot' id="drag1" draggable="true" ondragstart="drag(event, 2)" width="336"   height="69">   </div>

JS：

function allowDrop(ev) {
    ev.preventDefault(); 
}

function drag(ev, secondParam) {
    ev.dataTransfer.setData("Text", ev.target.id);
    console.log(secondParam);
}

function drop(ev, secondParam) {
   ev.preventDefault();
   var data = ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(data));
   console.log(secondParam)
}

JSFiddle：http://jsfiddle.net/amontellano/8twY6/

Answer 2

IE似乎只支持设置＆＃34; Text＆＃34;和＆＃34; URL＆＃34;。

http://msdn.microsoft.com/en-us/library/ie/ms536744(v=vs.85).aspx

我设置多个值的解决方法是：

var data = {
   id: ev.target.id, 
   dragIndex: index
};
ev.dataTransfer.setData("Text", JSON.stringify(data));

然后你必须在删除时解析它：

var data = JSON.parse(ev.dataTransfer.getData("Text"));
console.log(data.id);
console.log(data.dragIndex);

JavaScript拖放适用于Chrome，但不适用于IE

2 个答案: