dataTransfer.setData does not work in IE9

Question

I am binding some code to the dragstart event with jquery like this:

$new.on('dragstart', function(event) {
  event.originalEvent.dataTransfer.setData("text/html", $new.clone().wrap('<p>').parent().html());
});

$new is a jquery object. The aim is to attach the html of the dragged element to the event, so that i can create a copy when dropped. Chrome doesn't even need this event to do it. Firefox works when this code is added. But IE9 throws a SCRIPT65535: Unexpected call to method or property access. when the event is triggered. Here is a jsFiddle: http://jsfiddle.net/j52EM/3/

How can i make this work for IE?

Answer 1

in ie there's only two parameters according to the docs IE9 does not accept text/html as a format. USe just 'Text'

here's a sample ie according to the msdn website:

function InitiateDrag() 
//  The setData parameters tell the source object
//  to transfer data as a URL and provide the path.
{   
    event.dataTransfer.setData("URL", oImage.src);
}

function FinishDrag()
//  The parameter passed to getData tells the target
//  object what data format to expect.
{
    sImageURL = event.dataTransfer.getData("URL")
    oTarget.innerText = sImageURL;
}

Answer 2

setData method expect String data type not Number

setData('text',1) is wrong

setData('text',''+1) is correct