50

ドラッグ アンド ドロップのために JavaScript の event.dataTransfer を介してネイティブ オブジェクトを渡す方法を見つけようとしています。私は CMS のフロント エンド エディター部分を作成しており、ユーザーが要素をドラッグ アンド ドロップできるようにしたいと考えています (ファイルから画像、HTML のスニペット、ほぼすべての要素に至るまで、さまざまな種類の)。そのため、実際のオブジェクトを渡したいので、データをアタッチして、レンダリング方法を知るために必要なものを指定できます。

回避策の 1 つは、jQuery の .data() を使用してオブジェクトをページ上の別の場所にアタッチし、セレクター文字列を setData に渡すことですが、私はそのハックを特に楽しんでいません。

これは、jQuery UI のドラッグ可能/ドロップ可能 (ライブラリを使用することに完全に反対しているわけではありません) でも解決できますが、ドロップゾーンは 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
});

さて、仕様を読んだ後、これが失敗する理由を完全に理解しました。私が理解していないのは、最終的に私が望むものを達成する方法です。

ありがとう

4

2 に答える 2

76

文字列しか格納できないため、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);

この作業フィドルを参照してください

于 2013-04-05T17:35:07.373 に答える
6

私が提案しようとしていることが間違っているかもしれません (もしそうなら、その理由を喜んで聞きます)。ドラッグスタートリスナーに変数を設定して、必要なものを参照しないでください。たとえば、次のようになります。

//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();
});
于 2015-08-02T16:07:13.453 に答える