Avoid element to get selected when its dropped with jQuery sortable

Question

Hi!

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