JavaScript拖放功能可在Chrome中使用，但不能在IE中使用

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+支持拖放。

这是在IE上运行的具有2个参数的onDragStart和onDrop的示例：

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仅支持设置“文本”和“ URL”。

http://msdn.microsoft.com/zh-CN/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);