JQuery UI, Combining Sortable with Droppable

Question

Hello!

I am trying to combine JQuery UI sortable with droppable to create multiple pages for dropping and sorting things. I have setup a standalone demo:

http://whit.info/dev/sortdrop/

and here is a jsFiddle:

http://jsfiddle.net/VUuyx/

Note that you can drag to sort the boxes, even into other columns. You can also click the page buttons to switch pages. My problem lies in combining these two features:

By using droppable, I've allowed the user to drag a box to a page button, the page will then switch, and the user can finish dragging it onto the newly revealed page. The problem is that when the page switches, the first column which appears under the dragged box doesn't have it's over event fire. You have to drag to another column, and then back to the first column to get the placeholder to appear.

I'm not sure, but I think I need to somehow clear the events, or fire them manually. The problem seems to stem from the fact that the dragged box is over the column when it is made visible.

Can you assist with this esoteric dilemma?

Thanks!

Update:

So I have been considering possible work arounds for this. Michal suggested firing the refresh method, which indeed doesn't solve the problem, but made me think about event issues.

It seems that when you mouse away and then back again, the proper events fire. Perhaps if I can manually fire the mouseout event for the first column, the reset will allow the mouseover event to fire properly.

I tried this:

$(".column:first").trigger('mouseout'); 

But I don't think that is the same as sortable's out event. Perhaps I should fire that event?

Answer 1

Yeah adding $('.column').sortable("refresh"); to end of the show_page(id) function worked for me (only tested in firefox minefield):

function show_page(id) {
    $('.page').removeClass('page_active');
    $('#page_'+id).addClass('page_active');
    $('.column').sortable("refresh");
}

Answer 2

Maybe I'm misunderstanding the problem, but I don't think it has anything to do with the "page switching". If you turn on both pages at the same time and try to drag "Box 1" to a position above "Box 4", you'll see that it doesn't trigger that "Box 4"'s Sortable has received the Draggable until you go below "Box 4". This doesn't solve your problem, but perhaps will help you look in a better area for the solution.

See http://jsfiddle.net/nkBNP/7/ for a JSFiddle that demonstrates what I mean.

Answer 3

At least for the top down drop in I think the solution is somewhere in setting the box class to draggable and link it to the sortable object.

$(".box").draggable({
    tolerance: 'point',
    connectToSortable: '.column',
    snap:false,
    helper : 'clone',
});

This example creates a duplicate of the box but it does allow me to drag box 1 up to page 2 and slowly drag it down above box 5 and get placed into the top spot. It is very sensitive though. You may need to adjust the grids and snap to get it to work consistently for the casual user.

I can certainly imagine that a sortable object wouldn't expect something to come down from the top, because it expects things to be sorted from within the container. Droppable on the other hand expects things to enter from any direction.

Answer 4

Adding @edtechdev's answer to tolerance: 'intersect produced something I thought might satisfy you, Whit:

$(".column").sortable({
    connectWith: '.column',
    opacity: 0.4,
    tolerance: 'intersect', //<--changed
    placeholder: 'place_holder',
    helper: function(event, el) {
        var myclone = el.clone();
        $('body').append(myclone);
        return myclone;
    },
}).disableSelection();

// ...

function show_page(id) {
    $('.page').removeClass('page_active');
    $('#page_'+id).addClass('page_active');
    $('#page_'+id).find('.column:first').sortable('refresh'); //<- added
}

Answer 5

Check out drag and drop portal built using jQuery and Asp.Net MVC, it has all implementation in blog posts: http://lakkakula.wordpress.com/2009/06/15/web-2-0-portal-using-asp-net-mvc-microsoft-ajax-client-templates-and-jquery-with-drag-and-drop-widget-personalization/