jQuery UI Sortable - 如何取消拖动/排序的项目上的click事件？ [英] jQuery UI Sortable -- How can I cancel the click event on an item that's dragged/sorted?

问题描述

我有一个 jQuery UI Sortable 列表。可排序项目还附加了单击事件。拖动项目后是否有办法防止点击事件被触发？

I have a jQuery UI Sortable list. The sortable items also have a click event attached. Is there a way to prevent the click event from firing after I drag an item?

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

推荐答案

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

I had the same problem and since my sortable items contained three or four clickable items (and the number was variable) binding/unbinding them on the fly didn't really seem an option. However, by incident I specified the

helper : 'clone'

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

option, which behaved identically to the original sortable in terms of interface but apparently does not fire click events on the dragged item and thus solves the problem. It's as much a hack as anything else, but at least it's short and easy..

这篇关于jQuery UI Sortable - 如何取消拖动/排序的项目上的click事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！