Question

我有一个jQuery UI Sortable列表。可排序项目还附加了单击事件。有没有办法阻止在拖动项目后触发click事件？

$().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>

Answer 1

我有同样的问题，因为我的可排序项目包含三个或四个可点击的项目（并且数字是可变的）在运行中绑定/解除绑定它们似乎不是一个选项。但是，事件我指定了

helper : 'clone'

选项，在界面方面与原始可排序的行为完全相同，但显然不会触发拖动项目上的点击事件，从而解决了问题。它和其他任何东西一样多，但至少它简短而且容易......

Answer 2

如果你有对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>

Answer 3

如果您因某些原因不想使用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;
}

Answer 4

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

这是有效的，因为“one-listeners”在 “普通”侦听器之前被触发。因此，如果一个监听器停止传播，它将永远不会到达您之前设置的监听器。

Answer 5

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 ...

Answer 6

更容易，使用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>

Answer 7

我们还可以在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;

});

Answer 8

一种解决方案是使用live（）而不是普通绑定，但Elte Hupkes解决方案摇滚!!!!

Answer 9

感谢Elte Hupkus;

helper: 'clone'

我已经实现了相同的操作，下面显示了一个示例。

$(document).ready(function() {
$("#MenuListStyle").sortable({
 helper:'clone',
 revert:true
}).disableSelection();
});

Answer 10

$('.menu_group tbody a').click(function(){
    link = $(this).attr('href');
    window.location.href = link;
});

这个解决方案似乎对我有用。现在我可以点击可排序元素中的可点击内容。

注意：".menu_group tbody"为.sortable();

jQuery UI Sortable - 如何取消拖动/排序的项目上的click事件？

10 个答案: