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.

Answer 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.