使用jQuery UI Draggable拖放纯HTML？

如何将HTML内容拖到“画布”上？使用jQuery UI Draggable拖放纯HTML？

我想要一个简单的按钮列表（可拖动的项目），在那里我可以拖放一个项目。

我想要一个简单的按钮列表，但是当拖放到“画布”上时，我希望它为每个按钮填充不同的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');

但是还没有找到一个好方法来将这个“insertedHTML”放入画布中，而不是放入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();

这里是一个小提琴玩： http://jsfiddle.net/Preben/pcawje7u/8/

你能不能帮我解决我的代码？

谢谢:-)

来源

2016-12-15 Preben

使用下面的函数添加新的文本被拖动的项目。它为每个被拖动的物品添加它所拥有的财产。 data-insert-html

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

编辑，我忘记目标只有拖拽区域。我修复了我的代码。

来源

2016-12-15 15:16:01

奇怪的事情发生了：http://jsfiddle.net/Preben/pcawje7u/11/ – Preben

你没有更新你的小提琴。 :) –

错误的链接。这里我做了一些奇怪的事。给我一分钟:-) – Preben

使用jQuery UI Draggable拖放纯HTML？

回答

相关问题