jQuery UI Sortable - 如何取消拖动/排序的项目上的click事件？
[英]jQuery UI Sortable — How can I cancel the click event on an item that's dragged/sorted?
问题描述
我有一个jQuery UI可排序列表。 可排序项目还附加了单击事件。 拖动项目后，有没有办法防止点击事件被触发？
$().ready( function () { $('#my_sortable').sortable({ update: function() { console.log('update') }, delay: 30 }); $('#my_sortable li').click(function () { console.log('click'); }); });
#my_sortable li { border: 1px solid black; display: block; width: 100px; height: 100px; background-color: gray; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> <ul id="my_sortable"> <li id="item_1">A</li> <li id="item_2">B</li> <li id="item_3">C</li> </ul>
10 个解决方案
解决方案1
135 已采纳 2010-06-04 21:26:59
我有同样的问题，因为我的可排序项目包含三个或四个可点击的项目（并且数字是可变的）绑定/取消绑定他们在飞行中似乎不是一个选项。 但是，事件我指定了
helper : 'clone'
选项，在界面方面与原始可排序的行为相同，但显然不会触发拖动项目上的点击事件，从而解决了问题。 它和其他任何东西一样多，但至少它简单易行。
解决方案2
13 2009-06-03 21:57:29
如果您对li的click事件有引用，则可以在sortable update方法中取消绑定，然后使用Event / one重新绑定它。 重新绑定之前可以停止事件传播，从而阻止原始点击处理程序触发。
<!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>
解决方案3
3 2015-11-17 14:35:01
如果你出于某种原因不想使用helper:'clone'技巧，这对我有用。 它取消了拖动项目的click事件。 jQuery将类ui-sortable-helper到拖动的元素中。
$('.draggable').click(clickCancelonDrop);
function clickCancelonDrop(event) {
var cls = $(this).attr('class');
if (cls.match('ui-sortable-helper'))
return event.stopImmediatePropagation() || false;
}
解决方案4
2 2012-12-20 13:39:04
$('.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(); } );
}
});
这是因为“一个侦听器” 在 “普通”侦听器之前被触发。 因此，如果一个单一的监听器停止传播，它将永远不会到达您之前设置的监听器。
解决方案5
1 2013-11-08 11:43:47
我们还可以在stop事件上使用一个标志，并在click事件上检查该标志。
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;
});
解决方案6
1 2010-01-13 07:55:55
mercilor的答案为我提供了几个警告。 click事件实际上是在handle元素而不是sort类本身。 不幸的是，ui对象没有给你引用更新事件中的句柄（对jquery ui的功能请求？）。 所以我必须自己拿到手柄。 此外，我还必须调用preventDefault来停止点击操作。
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 ...
解决方案7
1 2010-09-15 22:52:41
更容易，使用var来了解元素何时被排序...
<!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>
解决方案8
0 2011-06-03 20:03:04
一种解决方案是使用live（）而不是正常绑定，但Elte Hupkes解决方案摇滚!!!!
解决方案9
-1 2014-12-31 05:37:48
感谢Elte Hupkus ;
helper: 'clone'
我已经实现了相同的，下面显示了一个示例。
$(document).ready(function() {
$("#MenuListStyle").sortable({
helper:'clone',
revert:true
}).disableSelection();
});
解决方案10
-1 2015-02-19 17:57:08
$('.menu_group tbody a').click(function(){
link = $(this).attr('href');
window.location.href = link;
});
这个解决方案似乎对我有用。 现在我可以点击可排序元素中的可点击内容。
注意： ".menu_group tbody"是.sortable();
jquery ui sortable + draggable 获取被拖项目的当前索引
[英]jquery ui sortable + draggable get current index of the dragged item
如何使用jQuery UI sortable选择悬停时将项目拖动到的div
[英]How to select the div which the item is being dragged into on hover, using jQuery UI sortable
在可排序的jQuery UI中，如何获取被拖动元素下方的元素
[英]In jQuery UI sortable, how do I get the element undernearth a dragged element
如何检查元素是否拖到JQuery UI Sortable之外？
[英]How to check if an element is dragged outside JQuery UI Sortable?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何覆盖jQuery ui sortable的drag事件？
jQuery UI拖放，可排序（保留拖动的项目）
jQuery的可排序的UI删除项目，当拖动到一个特定的div
jquery ui sortable + draggable 获取被拖项目的当前索引
如何使用jQuery UI sortable选择悬停时将项目拖动到的div
为什么不能将jQuery UI可排序元素从句柄中拖动？
在可排序的jQuery UI中，如何获取被拖动元素下方的元素
如何检查元素是否拖到JQuery UI Sortable之外？
如何使jQuery UI可排序div仅从图标拖动？
jQuery UI的Sortable更新事件未触发
相关标签