April 23, 2012

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

Question by 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?

Answer by Starx

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.

February 10, 2012

Allow sortable elements to be positioned freely on the screen

Question by Ryan

I am trying to use the jQuery UI’s draggable & Sortable to make an object drag-able freely so that the object does not have to remain next to each other in a container.

I want the object to be positioned freely within its parent.

How can I achieve this?

Answer by Starx

If I got the question you were trying to ask properly. This is generally achieved from just using the draggable option only.

See this demo here.


Please fill the form - I will response as fast as I can!