Работа с перетаскиванием 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+ поддерживает перетаскивание.

Вот образец 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 поддерживает только настройку «Текст», и "URL".

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);