Avoid element to get selected when its dropped with jQuery sortable

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 t开发者_开发技巧o 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!

---

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

---

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');
        }
    }
});