jQuery UI सॉर्ट करने योग्य - मैं उस आइटम पर क्लिक ईवेंट को कैसे रद्द कर सकता हूं जिसे ड्रैग/सॉर्ट किया गया है?

मेरे पास jQuery UI Sortable सूची है। क्रमबद्ध वस्तुओं में एक क्लिक इवेंट संलग्न है। क्या कोई आइटम खींचने के बाद क्लिक ईवेंट को फायरिंग से रोकने का कोई तरीका है?jQuery UI सॉर्ट करने योग्य - मैं उस आइटम पर क्लिक ईवेंट को कैसे रद्द कर सकता हूं जिसे ड्रैग/सॉर्ट किया गया है?

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

स्रोत

2009-06-03 Patrick McElhaney

अब ब्राउज़र और jqueryui के पास कुछ समय विकसित हुआ है (क्षतिपूर्ति?) यह व्यवहार केवल फ़ायरफ़ॉक्स (47.0) में स्पष्ट है। आधुनिक क्रोम और आईई 'sortable' के बाद' क्लिक 'घटना को नहीं चलाते हैं। – veeTrain

121

मैं एक ही समस्या थी और तब से मेरी sortable आइटम तीन या चार क्लिक करने योग्य आइटम निहित (और संख्या चर था) बाध्यकारी/मक्खी पर उन्हें अनबाइंडिंग वास्तव में एक विकल्प नहीं मालूम था। हालांकि, घटना से मैं

helper : 'clone'

विकल्प है, जो इंटरफेस के मामले में मूल sortable के समान व्यवहार किया लेकिन जाहिरा तौर पर घसीटा आइटम पर घटनाओं क्लिक करें आग नहीं करता है और इस तरह समस्या का हल निर्दिष्ट। यह के रूप में ज्यादा कुछ और के रूप में एक हैक है, लेकिन कम से कम यह आसान व सरल उपाय है ..

स्रोत

2010-06-04 21:26:59

[लेवी क्रीन] (http://stackoverflow.com/users/577743/levi-crain) कहता है: "सहायक": क्लोन "चाल क्रोम में काम नहीं करती है। ऑनक्लिक घटना आग नहीं है कभी भी। " –

यह मेरे क्रोम 12 में अच्छी तरह से काम करता है। धन्यवाद, यह बहुत आसान है। –

आपके लिए मेरा सबसे गहरा अनुमान !!! मैं इसके साथ पागल हो रहा था! – Bakaburg

आप अपने ली के लिए क्लिक करें घटना के लिए एक संदर्भ है, तो आप इसे sortable अद्यतन विधि में निकल सकते हैं तो इवेंट/एक का उपयोग करें यह rebind करने। इवेंट प्रचार को आपके मूल क्लिक हैंडलर को फायरिंग से रोकने से पहले आपको रिबाइंड करने से पहले रोका जा सकता है।

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

स्रोत

2009-06-03 21:57:29

एक के महान कार्यान्वयन! :) – ctrlShiftBryan

यह लगभग सही है, हालांकि यदि आप असफल ड्रैग करते हैं तो यह अभी भी क्लिक फ़ंक्शन करता है। कोई विचार? :( –

मर्सिलेटर द्वारा दिए गए उत्तर ने मुझे कुछ चेतावनी दी। क्लिक इवेंट वास्तव में सॉर्ट किए गए आइटम की बजाय हैंडल तत्व पर था। दुर्भाग्यवश ui ऑब्जेक्ट, आपको अपडेट इवेंट में हैंडल का संदर्भ नहीं देता है (jquery ui के लिए सुविधा अनुरोध?)। तो मुझे खुद को संभालना पड़ा। इसके अलावा, मुझे क्लिक एक्शन को रोकने के लिए रोकथाम को भी कॉल करना पड़ा।

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

स्रोत

2010-01-13 07:55:55 Marco

आसान, एक वर का उपयोग पता करने के लिए जब तत्व अनुसार क्रमबद्ध किया जा रहा है ...

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

स्रोत

2010-09-15 22:52:41 ragnar

एक समाधान का उपयोग करने के लिए है सामान्य बाध्यकारी के बजाय लाइव(), लेकिन एल्टे हूप्स समाधान चट्टानों !!!!

स्रोत

2011-06-03 20:03:04 Bakaburg

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

यह काम करता है क्योंकि "एक श्रोताओं" से पहले"सामान्य" श्रोताओं निकाल दिया जाता है। तो यदि एक श्रोता प्रचार को रोकता है, तो यह आपके पहले सेट श्रोताओं तक कभी नहीं पहुंच पाएगा।

स्रोत

2012-12-20 13:39:04

समस्या यह है कि ब्राउज़र ड्रैग के दौरान क्लिक ईवेंट को कभी भी फ़ायर नहीं करता है, इससे पहले 'असली' क्लिक ईवेंट – SimplGy

फ़ायरफ़ॉक्स 42.0 के लिए रोका जाएगा, मैं पुष्टि नहीं कर सकता कि 'एक' श्रोताओं के बाद 'श्रोताओं' को निकाल दिया गया है। असल में, मेरे 'श्रोता' को अभी भी मेरे 'एक' श्रोता से पहले ही बुलाया जाता है। – theV0ID

हम स्टॉप ईवेंट पर एक ध्वज का भी उपयोग कर सकते हैं और क्लिक ईवेंट पर उस ध्वज को चेक कर सकते हैं।

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; 

});

स्रोत

2013-11-08 11:43:47 Saurabh

-1

Elte Hupkus के लिए धन्यवाद;

helper: 'clone'

मैंने इसे लागू किया है और नमूना नीचे दिखाया गया है।

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

स्रोत

2014-12-31 05:37:48

-1

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

यह समाधान मेरे लिए काम किया जा रहा है। अब मैं क्रमबद्ध तत्वों के अंदर क्लिकबेल पर क्लिक कर सकता हूं।

नोट: ".menu_group tbody".sortable();

स्रोत

2015-02-19 17:57:08 Riki137

किसी कारण से आप helper:'clone' चाल का उपयोग नहीं करना चाहते हैं, तो यह मेरे लिए काम किया है। यह ड्रैग किए गए आइटम पर क्लिक ईवेंट को रद्द करता है। 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; 
}

स्रोत

2015-11-17 14:35:01

'ड्रैगगेबल' कहां से आ रहा है? मैंने सोचा कि यह 'sortable' के बारे में था। दरअसल, मेरे लिए एक खाली सूची में '$ (' ड्रैगगेबल ') '। – theV0ID

'.sortable 'कंटेनर सूची है इसके अंदर सभी आइटम'.draggable' हैं –

jQuery UI सॉर्ट करने योग्य - मैं उस आइटम पर क्लिक ईवेंट को कैसे रद्द कर सकता हूं जिसे ड्रैग/सॉर्ट किया गया है?

उत्तर

संबंधित मुद्दे