jQuery Drag And Drop Using Live Events
I have an application with a long list that changes frequently, and I need the items of that list to be draggable.
I've been using the jQuery UI draggable plugin, but it is slow to add to 400+ list items, and has to be re-added every time new list items are added.
Does anyone know of a plugin similar to the jQuery UI draggable plugin that uses jQuery 1.3's .live()
events? This would solve both problems.
Wojtek's solution worked perfectly for me. I wound up changing it a tad bit to make it extend jQuery...
(function ($) {
$.fn.liveDraggable = function (opts) {
this.live("mouseover", function() {
if (!$(this).data("init")) {
$(this).data("init", true).draggable(opts);
}
});
return this;
};
}(jQuery));
Now instead of calling it like:
$(selector).draggable({opts});
...just use:
$(selector).liveDraggable({opts})
This is a sample of code that perfectly worked for me
$('.gadgets-column').live('mouseover',function(){
$(this).draggable();
});
You could make wrapper function like this:
function liveDraggable(selector, options){
jQuery(selector).live("mouseover",function(){
if (!jQuery(this).data("init")) {
jQuery(this).data("init", true);
jQuery(this).draggable(options);
}
});
}
(I use prototype with jQuery - that's why i placed jQuery() instead of $())
And now instead of $(selector).draggable({opts}) use liveDraggable(selector, {opts})