javascript - 拖放如何更改可拖动元素的内容

Question

我想创建一个预定义元素列表，我存储在这样的 html 文件中

例子

Block1 = <div>my Block1</div> saved in block1.html
Block2 = <div>my Block2</div> saved in block2.html

现在您应该能够将这些元素之一拖到 div 中。

在这些元素“块列表”（使用 div 制作）的列表列表中，您可以将图像视为一种占位符（对于每个块来说都是唯一的）。

黑名单

<div class="myblocks" data-parameter1="Block1" data-parameter2="DEF">
<img ...>
</div>

我的js代码是这样的

function getBlockContent(parameter1,parameter2)
{
            $.get(parameter2+'/'+parameter1+'.html', function(data) { html=data; }).done(function(){ console.log(html); }); 
            return html;
      }

$(".myblocks").on('dragstart',function(e) {
     console.log("Drag Started - "+$(this).attr('data-parameter1')+" - "+$(this).attr('data-parameter2'));           
});

$('#destinationdiv').on('drop',function(e) {        
   e.preventDefault();  
   e.stopPropagation();
   var newcontent=getContent($(this).attr('data-parameter1'),$(this).attr('data-parameter1'));
   console.log("Drop it - "+$(this).attr('data-parameter1')+" - "+$(this).attr('data-parameter2'));
});

$(".myblocks").on('dragend',function(e) {
            console.log("Drag End - "+$(this).attr('data-parameter1')+" - "+$(this).attr('data-parameter2'));
      });

我如何使用 html 文件的内容来使用它并将其放置到放置点，而不是我从阻止列表中拖动开始的图像？

目前我有一个额外的问题，我没有收到 drop 事件中的参数 - 我不知道为什么？ 这样尝试，也失败了

console.log($(e.target).attr('data-parameter1'));
console.log($(e.originalEvent).attr('data-parameter1'));

希望我能解释我想做什么以及我需要知道什么——非常感谢你帮助我。

标签： javascriptjquery