Пропустить объект через dataTransfer

Я пытаюсь выяснить способ передачи собственного объекта через javascript event.dataTransfer для перетаскивания. Я пишу часть редактора интерфейса CMS и хочу, чтобы пользователи могли перетаскивать элементы (из многих разных типов, начиная от файлов и заканчивая изображениями до фрагментов HTML, чтобы что угодно). Вот почему я хочу передать реальный объект, поэтому я могу прикрепить к нему данные, чтобы указать, что нужно, чтобы знать, как его отображать.

Одним из способов является использование jQuery.data() для присоединения объекта к чему-то еще на странице, а затем просто передать селекторную строку в setData... но мне это особенно не нравится.

Это также можно решить с помощью jQuery UI draggable/droppable (и я не полностью против использования каких-либо библиотек), но поскольку dropzone находится в iframe, это фактически документированная ошибка в последнем пользовательском интерфейсе jQuery ( 1.10.2). Кроме того, я бы предпочел сделать это изначально, если это возможно. В этом приложении уже достаточно библиотек.

Здесь проблема: http://jsfiddle.net/AHnh8/

var foo = {foo: "foo", bar: "bar"};

$dragme.on("dragstart", function(e) {
    e.originalEvent.dataTransfer.setData("foo", foo);
});

$dropzone.on("dragenter", function(e) { e.preventDefault(); });
$dropzone.on("dragover", function(e) { e.preventDefault(); });
$dropzone.on("drop", function(e) {
    console.log(e.originalEvent.dataTransfer.getData("foo")); // [Object object]
    console.log(typeof e.originalEvent.dataTransfer.getData("foo")); // string
});

Теперь, прочитав спецификации, я полностью понимаю, почему это не удается. Я не понимаю, как в конечном итоге добиться того, чего я хочу.

Спасибо

Ответ 1

Вы должны передать объект JSON.stringify перед использованием setData, потому что вы можете хранить только строки.

var j = JSON.stringify(foo);
e.originalEvent.dataTransfer.setData("foo", j);

И наоборот, вы должны переконвертировать строку к объекту:

var obj = JSON.parse(e.originalEvent.dataTransfer.getData("foo"));
console.log("foo is:", obj);

См. this working Fiddle

Ответ 2

Возможно, что я собираюсь предложить неправильно (если так, я буду рад услышать, почему). Почему бы не установить переменную в прослушивателе dragstart, чтобы указать, что вам нужно, например:

//global variable
var obj;

//set the global variable to wahtever you wish in the dragstart:
$dragme.on("dragstart", function(e) {
    obj = foo;
    //or even obj = document.getElementById("some element id");
});

//use this obj in the drop listener.
$dropzone.on("drop", function(e) {
    obj.doWahtEver();
});