IE 9+ JQuery drag & drop for div not working

Question

function OnDragStartElement(e) {
    //this.style.opacity = '0.4';           
    srcElementParent = this;
    e.dataTransfer.effectAllowed = 'move';
    var elementCount = formElements.length > 0 ? Math.max.apply(Math, formElements.map(function (o) { return o.ID; })) : 0;     

    var elementText = $(this).children()[0].innerHTML;      
    var elementType = $($(this).children()[1])[0].value;
    var elementID = (elementCount + 1);
    var draggedElement = elementText + ': ' + elementText + elementID
    //debugger;
    e.dataTransfer.setData("dragedElement", draggedElement);
    e.dataTransfer.setData('draggedElementType', elementType);
    e.dataTransfer.setData('draggedElementID', elementID);
    isElementNotPlaced = true;
    isdragDivElement = false;
}

An error is thrown:

Unexpected call to method or property access.

The error I see is on the line:

e.dataTransfer.setData("dragedElement", draggedElement);

The same code works fine on Chrome & Firefox.

Does anyone have a solution for this?

Answer 1

Refere this link.

Drag & Drop HTML 5 jQuery: e.dataTransfer.setData() with JSON

no need to set data for each

e.dataTransfer.setData("dragedElement", draggedElement);
e.dataTransfer.setData('draggedElementType', elementType);
e.dataTransfer.setData('draggedElementID', elementID);

instead of this we can pass single json object as text.