javascript - 使用 jQuery UI Draggable 拖放纯 HTML？

Question

如何将 HTML 内容拖到“ Canvas ”上？

我想要一个看起来简单的按钮列表(可拖动项目)，我可以在其中拖放一个项目。

我想要一个简单的按钮列表，但是当拖放到“ Canvas ”上时，我希望它为每个按钮填充不同的 HTML。

我看到有人在可拖动项目中使用参数，例如“data-insert-html”。在这里，我看到人们使用基本的 HTML，或者他们想要放入 .mywrapper 的 html 文件的路径。

我尝试过不同的方法。这是最接近的，但距离我想去的地方还有几英里:

<div class="draggable"  data-insert-html='<h1>Some HTML</h1>'>
My button text
</div>
<div class="draggable"  data-insert-html='<p>Some other content</p>'>
My button #2 text
</div>

JS:

我发现我可以用它来获取数据:

var insertingHTML = $(this).attr('data-insert-html');

但是还没有找到一个好的方法来将“insertingHTML”放入 Canvas 而不是 DIV 的内容中。

$( ".draggable" ).draggable({
      connectToSortable: ".mywrapper",
      helper: "clone",
       helper: function(event) {
            return "<div class='custom-helper'>Add '" + $(this).context.innerHTML + "' by letting it go on the yellow field.</div>";

        },
        // I have tried to use the STOP event. But the problem with it is that I can only drag one item ONCE to the canvas. I want infinite. 
        stop: function() {

        // This gets the correct data from the draggable DIV
        var insertingHTML = $(this).attr('data-insert-html');

         // BUT then I am lost. How do I add this to where the marker is?
        event.originalEvent.dataTransfer.setData("Text",insertingHTML);
        // test ended
      },
      revert: "invalid",
    });
    $().disableSelection();

这是一个可以玩的 fiddle : http://jsfiddle.net/Preben/pcawje7u/8/

你能帮我修复我的代码吗？

谢谢你:-)

Answer 1

使用下面的函数将新文本添加到拖动的项目中。它为每个拖动的项目添加其所拥有的属性。 数据插入-html

stop: function() {
        $('.mywrapper [data-insert-html]').each(function(){
          $(this).html($(this).attr('data-insert-html'));
        });
      },

编辑:我忘记仅针对拖动的区域。我修复了我的代码。