Solución:
Tuve el mismo problema y dado que mis elementos clasificables contenían tres o cuatro elementos en los que se podía hacer clic (y el número era variable), vincularlos / desvincularlos sobre la marcha no parecía realmente una opción. Sin embargo, por incidente especifiqué el
helper : 'clone'
opción, que se comportó de manera idéntica al ordenable original en términos de interfaz pero aparentemente no dispara eventos de clic en el elemento arrastrado y, por lo tanto, resuelve el problema. Es tanto un truco como cualquier otra cosa, pero al menos es breve y fácil …
Si tiene una referencia al evento de clic para su li, puede desvincularlo en el método de actualización ordenable y luego usar Event / one para volver a vincularlo. La propagación de eventos se puede detener antes de volver a enlazar, evitando que se active el controlador de clic original.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
var myClick = function () {
console.log('click');
};
$().ready( function () {
$('#my_sortable').sortable({
update: function(event, ui) {
ui.item.unbind("click");
ui.item.one("click", function (event) {
console.log("one-time-click");
event.stopImmediatePropagation();
$(this).click(myClick);
});
console.log('update') },
delay: 30
});
$('#my_sortable li').click(myClick);
});
</script>
<style type="text/css" media="screen">
#my_sortable li {
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<ul id="my_sortable">
<li id="item_1">A</li>
<li id="item_2">B</li>
<li id="item_3">C</li>
</ul>
</body>
</html>
Si por alguna razón no desea utilizar el helper:'clone' truco, esto funcionó para mí. Cancela el evento de clic en un elemento que se arrastra. jQuery agrega la clase ui-sortable-helper al elemento arrastrado.
$('.draggable').click(clickCancelonDrop);
function clickCancelonDrop(event) {
var cls = $(this).attr('class');
if (cls.match('ui-sortable-helper'))
return event.stopImmediatePropagation() || false;
}