HTML拖动;掉落功能

时间:2014-06-19 06:28:57

标签: jquery drag-and-drop draggable drag

我正在制作“创建在线调查应用程序”,例如:http://fluidsurveys.com/,我希望为用户提供拖放功能。

用户具体做的是他拖动几个按钮(一次一个)并将其放入另一个容器中。我面临的问题是,我希望在拖动的每个按钮上都将特定的HTML放在可丢弃的容器上。

找到了很多阻力删除示例,但所有这些都拖动了项目&将它放在具有相同HTML的另一个中。我希望在特定按钮上拖放不同的html。

尽力解释这种情况,任何有关代码示例的帮助都会非常感谢。

1 个答案:

答案 0 :(得分:0)

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

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

检查以下代码:

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

在这里,您可以定义要拖动的可克隆元素。

而且:

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

定义容器以接受已删除的对象并将其插入文档中。

我也有一篇关于这个问题的博文,您可以在以下网址查看:

JQuery UI Drag/Drop Tutorial with a running example