chaonextdoor

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?