Evitando clicks durante o drag

[marcelo2605 10]

Tenho uma div que é arrastada pelo mouse:

 

content.draggable({
    axis: "x",
    cursor: "e-resize",
    containment : [endStage,0,startStage,0]
});

Dentro desta div, existem outras divs que, quando clicadas retornam um valor:

 

$('.item').on('click', function(){
  valor = $(this).data('artista');
  console.log('valor: ' + valor);
});

Mas eu preciso impedir o click das divs internas quando a div principal for arrastada. Então pensei no seguinte:

 

content.draggable({
      start: function(event, ui) {
      	console.log('start dragging');
      	clicado = false;
		
      },
      stop: function(event, ui) {
        console.log('stop dragging');
        clicado = true;
      }
});

E alterei o click para:

 

$('.personagem').on('click', function(){
   if (clicado = true){
   artista = $(this).data('artista');
   console.log('artista clicado: ' + artista);
}
});

Mas não funcionou

[angelorubin 142]

Bom dia,

 

Exemplo - http://jsfiddle.net/angelorubin/RBgzZ/

 

Espero que ajude.

[marcelo2605 10]

Angelo,

 

Meu html é um pouco diferente. Mas o problema é o seguinte:

 

http://jsfiddle.net/RBgzZ/58/ (editado)

 

Se eu arrastar a div principal clicando sobre o link, a ação do link (alert) se realiza.

 

Eu pensei em trocar o click pelo mouseup. Mas como ficaria em dispositivos touch?