HTML 拖放功能

【问题标题】：HTML drag & drop featureHTML 拖放功能
【发布时间】：2014-06-19 06:28:56
【问题描述】：

我正在开发“创建在线调查应用程序”，例如：http://fluidsurveys.com/，我希望在其中为用户提供拖放功能。

用户具体做的是他拖动几个按钮（一次一个）并将其放入另一个容器中。我面临的问题是，我希望在他拖动的每个按钮上将特定的 HTML 拖放到可放置容器上。

找到了许多拖放示例，但所有示例都将项目拖放到另一个具有相同 HTML 的项目中。我希望在特定的按钮拖动上放置不同的 html。

已尽力解释情况，任何有关代码示例的帮助都将非常感谢。

【问题讨论】：

【解决方案1】：

我正在使用 JQuery UI 来处理这种需求。

在 JQuery UI 中，您可以参考 Draggable Widget 的“克隆”助手来在拖动按钮时创建对象，也可以将函数附加到可拖动事件处理程序以创建具有任何所需行为的对象。

检查以下代码：

$("#div_dragIcon").draggable({  
    helper : "clone"  
});

在这里你可以定义一个可克隆的元素被拖动。

还有这个：

 $("#divCanvas").droppable({  
    drop: function (ev, ui){  
        $(this).append(ui.helper.clone());  
    }  
 });

定义一个容器来接受拖放的对象并将其插入到文档中。

我也有一篇关于这个问题的博文，你可以查看：

【讨论】：