4

現在のドラッグ要素のデータを記憶または取得したい。これは私がしたことです：

$('.source_element').on('dragstart', function(e){
   e.originalEvent.dataTransfer.setData("source", this); 
});

$('.destination').on('drop', function(e){
   var source = e.originalEvent.dataTransfer.getData('source');
   console.log(source);
   console.log(source.className);
   console.log($(source));
   $(this).html($(source).html());

   e.preventDefault();
});

最初の console.log[object HTMLDivElement]はオブジェクトではなく文字列として表示され、2 番目undefined、3 番目はエラーがスローされます。

dataTransfer.setDataしたがって、データを文字列としてのみ受け入れると思われ、オブジェクトは許可されません。その場合、この問題をどのように解決しますか?特定の ID を知らずに、どの要素がドラッグされているかをどのように覚えていますか?

4

3 に答える 3

3

各要素にIDまたはデータ属性を与えるなど、要素を一意に識別するために文字列を使用するだけです

$('.source_element').on('dragstart', function(e){
   var id = 'drag-'+(new Date()).getTime();
   this.id = id;
   //$(this).attr('data-drag', id);
   e.originalEvent.dataTransfer.setData("source", id); 
});

$('.destination').on('drop', function(e){
   var source = e.originalEvent.dataTransfer.getData('source');
   console.log(source);
   console.log($('#'+source));
   $(this).html($('#'+source).html());
   //console.log($('[data-id="'+source+'"]'));
   //$(this).html($('[data-id="'+source+'"]').html());

   e.preventDefault();
});
于 2013-06-09T18:14:03.143 に答える