blocks|key|1539989|text|如果您的li具有对click事件的引用，则可以在可排序的update方法中取消绑定它，然后使用Event/one重新绑定它。可以在重新绑定之前停止事件传播，从而防止触发原始的单击处理程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1539990|<!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>|code-block|syntax|javascript|1539991|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you have a reference to the click event for your li, you can unbind it in the sortable update method then use Event/one to rebind it. The event propagation can be stopped before you rebind, preventing your original click handler from firing.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html lang="en"&gt;
&lt;head&gt; 


  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"&gt;&lt;/script&gt;

  &lt;script type="text/javascript" charset="utf-8"&gt;
    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);                        

     });
  &lt;/script&gt;

  &lt;style type="text/css" media="screen"&gt;
    #my_sortable li {
      border: 1px solid black;
      display: block;
      width: 100px;
      height: 100px;    
      background-color: gray;
    }
  &lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

      &lt;ul id="my_sortable"&gt;                 
        &lt;li id="item_1"&gt;A&lt;/li&gt;
        &lt;li id="item_2"&gt;B&lt;/li&gt;
        &lt;li id="item_3"&gt;C&lt;/li&gt;
      &lt;/ul&gt;   

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1324920|text|费利勒的回答对我有效，有几个警告。单击事件实际上发生在handle元素上，而不是排序的项本身。不幸的是，ui对象没有为您提供对update事件中句柄的引用(对jquery+ui的特性请求？)。所以我得自己去拿把手。此外，我还必须调用preventDefault来停止单击操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1324921|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+...|code-block|syntax|javascript|1324922|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The answer by mercilor worked for me a couple of caveats.  The click event was actually on the handle element rather than the sorted item itself.  Unfortunately the ui object, doesn't give you a reference to the handle in the update event (feature request to jquery ui?).  So I had to get the handle myself.  Also, I had to call preventDefault as well to stop the click action.</p>

<pre><code>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 ...
</code></pre>


blocks|key|1325009|text|我也有同样的问题，因为我的可排序项目包含三到四个可点击的项目(数量是可变的)，动态绑定/取消绑定它们似乎不是一个真正的选择。但是，由于意外，我指定了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1325010|helper+:+'clone'|code-block|syntax|javascript|1325011|选项，它在界面方面与原始的可排序对象行为相同，但显然不会在被拖动的项上触发单击事件，从而解决了问题。和其他东西一样，这也是一种技巧，但至少它是简短和简单的。|1325012|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>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</p>

<pre><code>helper : 'clone'
</code></pre>

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


blocks|key|1325122|text|更简单的是，使用var来知道元素何时被排序...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1325123|<!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"+%7C%7C+!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>|code-block|syntax|javascript|1325124|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Easier, use a var to know when the element is being sorted...</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html&gt;
&lt;head&gt; 


  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"&gt;&lt;/script&gt;

  &lt;script type="text/javascript" charset="utf-8"&gt;
    $().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');
         }
       });                        

     });
  &lt;/script&gt;

  &lt;style type="text/css" media="screen"&gt;
    #my_sortable li {
      border: 1px solid black;
      display: block;
      width: 100px;
      height: 100px;    
      background-color: gray;
    }
  &lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

      &lt;ul id="my_sortable"&gt;                 
        &lt;li id="item_1"&gt;A&lt;/li&gt;
        &lt;li id="item_2"&gt;B&lt;/li&gt;
        &lt;li id="item_3"&gt;C&lt;/li&gt;
      &lt;/ul&gt;   

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1325179|text|一种解决方案是使用live()而不是普通绑定，但是Elte+Hupkes解决方案太棒了！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1325180|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>One solution is to use live() instead of normal binding, but Elte Hupkes solution rocks!!!!</p>


blocks|key|1325246|text|我们也可以在停止事件上使用一个标志，并在单击事件上检查该标志。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1325247|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;

});|code-block|syntax|javascript|1325248|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>We can also use a flag on the stop event that and check that flag on the click event.</p>

<pre><code>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;

});
</code></pre>


blocks|key|1540456|text|感谢Elte+Hupkus；|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1540457|helper:+'clone'+|code-block|syntax|javascript|1540458|我已经实现了同样的方法，示例如下所示。|1540459|$(document).ready(function()+{
$("#MenuListStyle").sortable({
+helper:'clone',
+revert:true
}).disableSelection();
});|1540460|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/358873/elte-hupkes^0|2|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Thanks to <a href="https://stackoverflow.com/users/358873/elte-hupkes">Elte Hupkus</a>;</p>

<pre><code>helper: 'clone' 
</code></pre>

<p>I have implemented the same and a sample is shown below.</p>

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


blocks|key|1325352|text|$('.menu_group+tbody+a').click(function(){
++++link+=+$(this).attr('href');
++++window.location.href+=+link;
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1325353|这个解决方案似乎对我很有效。现在，我可以单击可排序元素中的clickables。|unstyled|1325354|注：".menu_group+tbody"为.sortable();|offset|length|style|CODE|1325355|entityMap^0|0|0|2|J|M|C|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|N|$]]

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

<p>This solution seems to be working for me. Now i can click on clickables inside sortable elements. </p>

<p>Note: <code>".menu_group tbody"</code> is <code>.sortable();</code></p>


blocks|key|1325403|text|如果您出于某种原因不想使用helper:'clone'技巧，这个技巧对我很有效。它取消拖动的项上的单击事件。jQuery会将类ui-sortable-helper添加到拖动的元素中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1325404|$('.draggable').click(clickCancelonDrop);
function+clickCancelonDrop(event)+{
++++var+cls+=+$(this).attr('class');
++++if+(cls.match('ui-sortable-helper'))
+++++++++return+event.stopImmediatePropagation()+%7C%7C+false;
}|code-block|syntax|javascript|1325405|entityMap^0|D|E|1R|I|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>If you for some reason don't want to use the <code>helper:'clone'</code> trick, this worked for me. It cancels the click event on an item that is dragged. jQuery adds the class <code>ui-sortable-helper</code> to the dragged element.</p>

<pre><code>$('.draggable').click(clickCancelonDrop);
function clickCancelonDrop(event) {
    var cls = $(this).attr('class');
    if (cls.match('ui-sortable-helper'))
         return event.stopImmediatePropagation() || false;
}
</code></pre>


<p>I have a <a href="http://docs.jquery.com/UI/Sortable" rel="nofollow noreferrer">jQuery UI Sortable</a> 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?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$().ready( function () { 
 $('#my_sortable').sortable({
   update: function() { console.log('update') },
   delay: 30
 });    

 $('#my_sortable li').click(function () {    
   console.log('click');
 });                        

});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#my_sortable li {
          border: 1px solid black;
          display: block;
          width: 100px;
          height: 100px;    
          background-color: gray;
        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"&gt;&lt;/script&gt;

&lt;ul id="my_sortable"&gt;                 
  &lt;li id="item_1"&gt;A&lt;/li&gt;
  &lt;li id="item_2"&gt;B&lt;/li&gt;
  &lt;li id="item_3"&gt;C&lt;/li&gt;
&lt;/ul&gt;   </code></pre>
</div>
</div>
</p>


jQuery UI Sortable -- How can I cancel the click event on an item that's dragged/sorted?

jQuery

我有一个列表。可排序项目还附加了一个单击事件。有没有一种方法可以防止在我拖动一个项目后触发click事件？​$().ready( function () {  $('#my_sortable').sortable({   update: function() { console.log('update') },   d...

问jQuery UI可排序--如何取消拖动/排序的项目上的单击事件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI可排序--如何取消拖动/排序的项目上的单击事件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI可排序--如何取消拖动/排序的项目上的单击事件？
EN