How should I integrate both jQueryUI draggable and sortable in my project?

Question

I want to integrate both jQueryUI draggable and sortable in my project and distinguish them using the time difference between the starting time of mousedown and first mousemove events. Part of my code is as follows:

var deltaX = self.mouse.startX - event.pageX,
    deltaY = self.mouse.startY - event.pageY;
if (self.mouse.mousedownTime - self.mouse.mousemoveTime < 700){                   
                // Drag down
                if(Math.abs(deltaX) < Math.abs(deltaY) && deltaY < 0){
                    $(self.el).draggable({disabled: false});
                    $(self.el).sortable({disabled: true});
                    $(self.el).draggable({axis: 'y'});
                    $(self.el).draggable({revert: true});
 ....
}
// Sorting action
else {
            $(self.el).sortable({disabled: false});
            $(self.el).draggable({disabled: true}); // global dragging
            $(self.el).sortable({containment: $(self.el).closest('.content')});
        }

But things are not what I expected. Every time I start dragging the element, the html shown in firebug has the right draggable/sortable class setting but it's not effective for current dragging events. For example, when you drag for the first time, the element is neither draggable nor sortable although the html has already had the corresponding class setting. It will be draggable or sortable the second time you drag it. And if you set the element draggable/sortable for current dragging event, it only works the next time you drag it.

In a word, the draggable/sortable event you expect for current event will only be effective for the next event. I wanna know if this is what the jQueryUI should be or there is sth wrong with my code. How should I fix it? How should I integrate both draggable and sortable in my project?

Starx Starx · Accepted Answer · 2012-04-23T23:29:48

This is an expected behavior, to hook an plugin onto the element, it has to listen to when it will be dropped and where it will be dragged.

Normally these two plugin work side-by-side. So I dont think there is a way to do this, without making the element only draggable, since droppable would need to be dragged anyhow.

How should I integrate both jQueryUI draggable and sortable in my project?

1 Answers