draggable inside a sortable with jquery

Question

I have a sortable list of divs using the jquery UI. It works fine.

However, I would like to have certain images inside the divs be draggable. The divs keep taking priority though every time I try to drag an image. The sortable div gets dragged instead.

Ok, so I figured I need to catch the mouseenter and mouseleave events on the image and temporarily disable the sortable divs while it was hovering. That didn't work (Maybe I didn't do it the right way though)

Does anyone know how to get this to work?

Sorry if this has been asked before, but I didn't find anything when I searched.

EDIT: Took a bit of time to find the exact place. Anyway here is the current sortable code.

var oldColumn = '';
var systemColumnCounter = $(".systemColumn").length;
$(".systemColumn").sortable({
    /*
    accept-option mit neuer Version von JqueryUI
    */
    accept: '.none',
    placeholder: 'systemElementPlaceHolder',
    connectWith: '.systemColumn',
    dropOnEmpty: true,
    items: 'div.systemElement',
    forceHelperSize: true,
    start: function(event, ui){
        oldColumn = ui.item.parent();
        $("body").myPopup("hideAll");



    },
    sort: function(event, ui){
        $(this).ElementBorderRemove();
        $(".systemElementPlaceHolder").addClass("systemBorderColor");
        $(".systemElementPlaceHolder").height(ui.helper.height());
    },
    stop: function(event, ui){
        var counter = 0;
        var elementBefor = '';
        var elementAfter = '';
        var Item = ui.item;
        var myColumn = Item.parent();

        if(oldColumn.children().length == 0)
        {
            oldColumn.append('<span class="columnEmptyMessage">Column is empty.</span>');
        }

        myColumn.children().each(function(){    
            if($(this).hasClass("columnEmptyMessage") && myColumn.children().length > 1)
            {
                $(this).remove();
            }               

            if($(this).attr("id") == ui.item.attr("id"))
            {
                if(counter > 0)
                {
                    elementBefor = myColumn.children().eq(counter-1).attr("id");
                }

                if(counter < (myColumn.children().length - 1))
                {
                    elementAfter = myColumn.children().eq(counter+1).attr("id");
                }
                return false;
            }
            counter++;
        })

        serialStr = elementBefor + '|' + elementAfter + '|' + myColumn.attr("id") + '|' + ui.item.attr("id");
        if(!ui.item.hasClass("systemNewElement"))
        {
            $.ajax({
                url: "includes/administration.action.php",
                type: "POST",
                data: "action=elementItemSort&items="+serialStr,
                dataType: "html",
                cache: false,
                success: function(data){                    
                    //alert(data);
                },
                error:function(x,e){
                },
                complete: function(data){
                }
            }); 
        }
    }
});

The html has a couple of divs with class systemColumn and the stuff inside is sortable... This part works.

@Andre I'll post it soon when I get a chance.

Tim Seguine
– Tim Seguine

2011-10-06 09:40:52 +00:00
Commented Oct 6, 2011 at 9:40 — Tim Seguine
– Tim Seguine, Commented Oct 6, 2011 at 9:40

Keith.Abramo · Accepted Answer · 2011-10-12 00:28:52Z

1

You might want to consider only having part of your div (part that the img is not contained in) as the only place on that div you can click to start the sorting by using the "handle" option http://docs.jquery.com/UI/API/1.8/Draggable#option-handle.

You could have the left hand side of the div have some kind of "move" cursor image so the user sees it and knows to click there in order to move the div to sort it. This removes complexity in your code and also removes confusion on the users end.

answered Oct 12, 2011 at 0:28

Keith.Abramo

6,9652 gold badges34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tim Seguine Over a year ago

From the looks of it, I give handle a list of the elements which I want to use for sorting. Is there a way I can tell it something like "everything but image tags"?

Tim Seguine Over a year ago

I guess I should reword that. Can I pass it an arbitrary selector?

Tim Seguine Over a year ago

I tried it with handle:':not(img)' and it didn't work. But this seems to be fairly close to what I want: handle: 'span, p, li, h1, h2, h3, h4, h5, h6'

Collectives™ on Stack Overflow

draggable inside a sortable with jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related