Question

I have a function which let me select a element when its clicked. It goes like this:

$( ul.grid li ).click(function() {
    var input = $(this).find( input.select-state:first );
    var value = input.attr( value );
    if (value ==  0 ) {
        $(this).addClass( active );
        input.attr( value ,  1 );
    } else {
        $(this).removeClass( active );
        input.attr( value ,  0 );
    }
});

When I add jQuery sortable to this, the element that get dropped is immediately selected when I drop it because this function runs. What is the approach to solve this problem?

Thanks!

Answer 1

Never used jQuery Sortable, but can you add call to .stopImmediatePropagation() to the function that calls sortable?

Answer 2

You could set a flag on the element when dragging starts, like so:

$(document).ready(function(){
    $( ul.grid ).sortable({
        start: function(event, ui){
            ui.item.data( dragged , true);
        }
    });
});

Then just check for and flip that flag in your click function, like this:

$( ul.grid li ).click(function() {
    if($(this).data( dragged )){
        $(this).data( dragged , false);
    } else {
        var input = $(this).find( input.select-state:first );
        var value = input.attr( value );
        if (value ==  0 ) {
            $(this).addClass( active );
            input.attr( value ,  1 );
        } else {
            $(this).removeClass( active );
            input.attr( value ,  0 );
        }
    }
});

友情链接