我正在开发一个带有 jquery 的工具栏插件以及 jquery ui 的拖放功能。这个想法如下:我有一个列表(ul)和项目(li),其中每个项目代表一个工具,如文本,几何图形等。当我拖动工具然后将其放在容器上时,必须创建一个“小部件”。问题是,将该工具放到容器上后,就无法再通过拖放来使用它。拖放功能只需运行一次。
希望你能帮我。对不起我的英语不好。
这是代码
插件
(function($){
//Attach this new method to jQuery
$.fn.extend({
//This is where you write your plugin's name
spkToolbar: function(options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
isDraggable:false
,droppableDiv:undefined
};
var options = $.extend(defaults, options);
//Iterate over the current set of matched elements
return this.each(function() {
var o = options;
$(this).addClass('toolbar');
if(o.isDraggable)
$('.toolbar').draggable();
$(this).addClass('spkToolbar');
var obj = $(this);
//Get all LI in the UL
var items = $("ul li", obj);
items.draggable({ appendTo: "body",helper: 'clone' });
if(o.droppableDiv!=undefined){
$(o.droppableDiv).droppable({
drop: function( event, ui ) {
// some extra code for proper widget creation
}
});
}
});
}
});
})(jQuery);
the html
<div id="toolbar">
<ul>
<li id="save" title="Guardar cambios"><img src="<c:url value="images/toolbar/save.png" />" /></li>
</ul>
</div>
usage:
jQuery('#toolbar').spkToolbar({droppableDiv:'#new-dropcontainer'});
几乎我忘记了,我使用 jquery 1.5 和 jquery ui 1.8.1
提前致谢
这是代码的工作版本:http://jsfiddle.net/marcosfromero/YRfVd/ http://jsfiddle.net/marcosfromero/YRfVd/
我添加了这个 HTML:
<div id="new-dropcontainer">
<ul>
</ul>
</div>
与此关联的 JavaScript:
if(o.droppableDiv!=undefined){
$(o.droppableDiv).droppable({
drop: function( event, ui ) {
// clone the original draggable, not the ui.helper
// and append it to the ul element inside new-dropcontainer
jQuery('#new-dropcontainer ul').append(ui.draggable.clone());
// some extra code for proper widget creation
}
});
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)