javascript - soltar - jQuery UI Sortable: ¿cómo puedo cancelar el evento click en un elemento que se arrastra/ordena?
jquery drag and drop list (10)
Gracias a ;
helper: ''clone''
He implementado el mismo y una muestra se muestra a continuación.
$(document).ready(function() {
$("#MenuListStyle").sortable({
helper:''clone'',
revert:true
}).disableSelection();
});
Tengo una lista ordenable jQuery UI . Los elementos ordenables también tienen un evento de clic adjunto. ¿Hay alguna manera de evitar que el evento de clic se active después de arrastrar un elemento?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<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">
$().ready( function () {
$(''#my_sortable'').sortable({
update: function() { console.log(''update'') },
delay: 30
});
$(''#my_sortable li'').click(function () {
console.log(''click'');
});
});
</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>
La respuesta de mercilor funcionó para mí un par de advertencias. El evento de clic estaba realmente en el elemento de control en lugar del elemento ordenado en sí. Lamentablemente, el objeto ui no le da una referencia al identificador en el evento de actualización (solicitud de función para jquery ui?). Así que tuve que obtener el mango yo mismo. Además, tuve que llamar preventDefault también para detener la acción de hacer clic.
update: function(ev, ui) {
var handle = $(ui.item).find(''h3'');
handle.unbind("click");
handle.one("click", function (event) {
event.stopImmediatePropagation();
event.preventDefault();
$(this).click(clickHandler);
});
// other update code ...
Más fácil, use una var para saber cuándo se está ordenando el elemento ...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<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">
$().ready( function () {
$(''#my_sortable'').sortable({
start: function() {
sorting = true;
},
update: function() {
console.log(''update'');
sorting = false;
},
delay: 30
});
$(''#my_sortable li'').click(function () {
if (typeof(sorting) == "undefined" || !sorting) {
console.log(''click'');
}
});
});
</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 quieres utilizar el truco de helper:''clone'' , 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;
}
Si tiene una referencia al evento click para su li, puede desvincularlo en el método de actualización sortable y luego usar Event / one para volver a vincularlo. La propagación del evento puede detenerse antes de volver a vincular, evitando que se active el controlador de clics 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>
También podemos usar una bandera en el evento de detención y verificar esa bandera en el evento de clic.
var isSortableCalled = false;
$(''#my_sortable'').sortable({
stop: function(event, ui){
isSortableCalled = true;
},
update: function() { console.log(''update'') },
delay: 30
});
$(''#my_sortable li'').click(function () {
if(!isSortableCalled){
console.log(''click'');
}
isSortableCalled = false;
});
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), en realidad no era una opción vincularlos o desvincularlos sobre la marcha. Sin embargo, por incidente, especifiqué
helper : ''clone''
opción, que se comportó de manera idéntica a la clasificación original en términos de interfaz, pero aparentemente no activa 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 corto y fácil ...
Una solución es usar Live () en lugar de enlace normal, ¡pero la solución de Elte Hupkes es genial!
$(''.menu_group tbody a'').click(function(){
link = $(this).attr(''href'');
window.location.href = link;
});
Esta solución parece estar funcionando para mí. Ahora puedo hacer clic en elementos seleccionables dentro de elementos ordenables.
Nota: ".menu_group tbody" es .sortable();
$(''.selector'').draggable({
stop: function(event, ui) {
// event.toElement is the element that was responsible
// for triggering this event. The handle, in case of a draggable.
$( event.toElement ).one(''click'', function(e){ e.stopImmediatePropagation(); } );
}
});
Esto funciona porque los "oyentes unicos" son despedidos antes que los oyentes "normales" . Entonces, si un solo oyente detiene la propagación, nunca llegará a los oyentes previamente establecidos.