dataTransfer를 통해 객체 전달

Question

드래그 앤 드롭을 위해 자바 스크립트의 event.dataTransfer를 통해 네이티브 객체를 전달하는 방법을 찾으려고합니다. 저는 CMS의 프런트 엔드 편집기 부분을 작성 중이며 사용자가 파일에서 이미지, HTML 스 니펫 (snippet of HTML)에 이르기까지 다양한 유형의 요소를 끌어다 놓을 수 있기를 바랍니다. 그래서 실제 객체를 전달하려는 것입니다. 따라서 데이터를 렌더링하는 방법을 알기 위해 필요한 객체를 지정하기 위해 데이터를 첨부 할 수 있습니다.

한 가지 해결 방법은 jQuery의 .data()를 사용하여 페이지의 다른 객체에 객체를 첨부 한 다음 선택기 문자열을 setData에 전달하는 것입니다.하지만 특별히 해킹을 즐기지는 않습니다.

jQuery UI의 draggable/droppable로 해결할 수도 있지만 dropzone은 iframe에 있기 때문에 최신 jQuery UI의 문서화 된 버그입니다. (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 
}); 

이 사양을 읽은 후, 나는 완전히 이해 :

다음은 문제입니다. 내가 이해하지 못하는 것은 내가 원하는 것을 궁극적으로 성취하는 것입니다.

감사

Answer 1

당신은 setData 때문에 당신이 할 수있는 유일한 상점 문자열을 사용하기 전에 JSON.stringify에 개체를 전달해야한다.

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를 참조 바이올린

작업

Answer 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's id"); 
}); 

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