सवाल JQuery ड्रैग और ड्रॉप के साथ क्लिक ईवेंट को रोकना


मेरे पास पृष्ठ पर एक तत्व है जो jQuery के साथ draggabe हैं। इन तत्वों पर क्लिक करें जो किसी अन्य पृष्ठ पर नेविगेट करता है (उदाहरण के लिए सामान्य लिंक)।

ऐसे तत्व को छोड़ने पर फायरिंग से क्लिक रोकने से रोकने का सबसे अच्छा तरीका क्या है, जबकि इसे ड्रैग और ड्रॉप न करने में क्लिक करने की इजाजत है?

मुझे सॉर्ट करने योग्य तत्वों के साथ यह समस्या है, लेकिन लगता है कि सामान्य ड्रैग और ड्रॉप के लिए समाधान होना अच्छा है।

मैंने खुद के लिए समस्या हल कर ली है। उसके बाद उसी समाधान को मिला पवित्रशास्त्र के लिए मौजूद है, लेकिन हो सकता है कि किसी को इसे प्राप्त करने का बेहतर तरीका हो।


76
2017-11-20 16:25


मूल


इसी प्रकार / डुप्लिकेट: stackoverflow.com/questions/3486760/... - Ryan


जवाब:


एक समाधान जो मेरे लिए अच्छा काम करता है और उसे टाइमआउट की आवश्यकता नहीं होती है: (हाँ मैं थोड़ी पैडेंटिक हूं ;-)

ड्रैगिंग शुरू करते समय मैं तत्व में मार्कर क्लास जोड़ता हूं, उदा। 'Noclick'। जब तत्व गिरा दिया जाता है, तो क्लिक ईवेंट ट्रिगर होता है - ड्रैगिंग समाप्त होने पर अधिक सटीक रूप से, वास्तव में इसे वैध लक्ष्य पर छोड़ना नहीं पड़ता है। क्लिक हैंडलर में, यदि मौजूद है तो मैं मार्कर क्लास को हटा देता हूं, अन्यथा क्लिक सामान्य रूप से संभाला जाता है।

$('your selector').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('your selector').click(function(event) {
    if ($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
        // actual click event code
    }
});

84
2018-03-26 19:16



उपयोगी! एक बार में मेरे लिए काम नहीं कर रहा था, शायद इसलिए कि मैं एक ही चीज़ पर पिछले प्रयासों में गड़बड़ कर रहा था और कक्षाएं एक क्लिक के मुकाबले एक अलग तत्व पर समाप्त हुईं .. लेकिन वैसे भी, मैंने एक वैश्विक चर का उपयोग किया (जो इस अत्यंत पर सरल पृष्ठ ठीक था), और यह भी काफी अच्छा काम किया। - MSpreij
यह मुझे मेरे समाधान के लिए ले जाता है, मैंने बस कक्षा के बजाय jQuery डेटा फ़ंक्शन का उपयोग किया। धन्यवाद। - William
लेकिन प्रत्येक बार जब आप तत्व छोड़ते हैं तो ब्राउज़र ट्रिगर पर ट्रिगर नहीं करेगा - puchu
किसी वर्ग या डेटा को सेट करने के लिए, क्लिक ईवेंट हैंडलर में आप भी इसका उपयोग कर सकते हैं: if (! $ (This) .is ('। Ui-draggable-dragging')) {... कार्रवाई पर क्लिक करें} - ChrisV
मुझे यह जवाब बहुत बेहतर लगता है: stackoverflow.com/a/13973319/336694 - Heliodor


समाधान क्लिक हैंडलर जोड़ना है जो ड्रैग की शुरुआत पर प्रचार करने के लिए क्लिक को रोक देगा। और फिर ड्रॉप करने के बाद उस हैंडलर को हटा दें। क्लिक करने के लिए क्लिक रोकथाम के लिए आखिरी कार्रवाई में देरी होनी चाहिए।

क्रमबद्ध करने के लिए समाधान:

...
.sortable({
...
        start: function(event, ui) {
            ui.item.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.item.unbind("click.prevent");}, 300);
        }
...
})

खींचने योग्य के लिए समाधान:

...
.draggable({
...
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        }
...
})

38
2017-11-20 16:26



मुझे यह जवाब बहुत बेहतर लगता है: stackoverflow.com/a/13973319/336694 - Heliodor
ऐसा लगता है कि यह मेरे लिए क्लिक इवेंट को रोक नहीं सकता है, मैं jquery 1.9.1 और jquery.ui 1.10.3 का उपयोग कर रहा हूं - aaron
@ हेलीओडोर सहमत हुए।
अजीब बात है कि आपने अपने प्रश्न का उत्तर दिया है, और यह काम भी नहीं कर रहा है, साशा लॉल।
@araron नीचे यह जवाब काम करता है: http://stackoverflow.com/a/4572831/119765 - lol


मैं इसमें जोड़ना चाहता हूं कि ऐसा लगता है कि क्लिक ईवेंट को रोकना केवल तभी काम करता है जब क्लिक ईवेंट को ड्रैग करने योग्य या क्रमबद्ध ईवेंट के बाद परिभाषित किया जाता है। यदि क्लिक पहले जोड़ा जाता है, तो यह ड्रैग पर सक्रिय हो जाता है।


11
2018-03-15 13:34



हां, यह सबसे आसान और सबसे प्रभावशाली तरीका होना चाहिए !!! - JxAxMxIxN


मुझे एक ही समस्या थी और मैंने कई दृष्टिकोणों की कोशिश की और मेरे लिए कोई भी काम नहीं किया।

समाधान 1

$('.item').click(function(e)
{            
    if ( $(this).is('.ui-draggable-dragging') ) return false;
});  

मेरे लिए कुछ नहीं करता खींचने के बाद आइटम पर क्लिक किया जा रहा है।

समाधान 2 (टॉम डी बोयर द्वारा)

$('.item').draggable(
{   
    stop: function(event, ui) 
    {
         $( event.originalEvent.target).one('click', function(e){ e.stopImmediatePropagation(); } );
    }
});

यह ठीक काम करता है लेकिन एक मामले में विफल रहता है- जब मैं पूर्णस्क्रीन ऑनक्लिक जा रहा था:

var body = $('body')[0];     
req = body.requestFullScreen || body.webkitRequestFullScreen || body.mozRequestFullScreen;
req.call(body); 

समाधान 3 (साशा यानोवेट्स द्वारा)

 $('.item').draggable({
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        }
})

यह मेरे लिए काम नहीं करता है।

समाधान 4- केवल एक ही जो ठीक काम करता है

$('.item').draggable(
{   
});
$('.item').click(function(e)
{  
});

हां, यह है- सही क्रम चाल है- सबसे पहले आपको ड्रैगगेबल () को बाध्य करने की आवश्यकता है, फिर ईवेंट () ईवेंट पर क्लिक करें। यहां तक ​​कि जब मैं क्लिक () ईवेंट में फुलस्क्रीन टॉगलिंग कोड डालता हूं तब भी खींचते समय यह पूर्णस्क्रीन पर नहीं जाता था। मेरे लिए सही है!


10
2018-03-28 12:44



केवल एक जो मेरे लिए काम करता है (आईई 11 / एज में) समाधान था 4. धन्यवाद! - Simon


मैं वास्तव में टाइमर या रोकथाम का उपयोग नहीं करना चाहता, इसलिए मैंने जो किया वह यह है:

var el, dragged

el = $( '#some_element' );

el.on( 'mousedown', onMouseDown );
el.on( 'mouseup', onMouseUp );
el.draggable( { start: onStartDrag } );

onMouseDown = function( ) {
  dragged = false;
}

onMouseUp = function( ) {
  if( !dragged ) {
    console.log('no drag, normal click')
  }
}

onStartDrag = function( ) {
  dragged = true;
}

ठोस चट्टान..


9
2017-11-15 08:48



मैं यह पसंद है! - aaron
यह मेरे लिए सबसे अच्छा समाधान था। मुझे jquery.ui.touch.punch.js का उपयोग कर मोबाइल वेब ब्राउज़र में एक jquery UI सॉर्ट करने योग्य पर काम करने के लिए क्लिक ईवेंट प्राप्त करने में परेशानी थी, लेकिन इसने इसे काफी सुंदर ढंग से हल किया। - Godsmith


मैंने पाया कि मानक jQuery क्लिक फ़ंक्शन का उपयोग करना:

$("#element").click(function(mouseEvent){ // click event }); 

jQuery यूआई में बस ठीक काम करता है। ड्रैगिंग और ड्रॉप करते समय क्लिक ईवेंट निष्पादित नहीं किया जाएगा। :)


9
2018-01-01 00:44



यह मेरे लिए काम करता था, लेकिन मुझे क्लिक इवेंट को परिभाषित करने की आवश्यकता थी बाद खींचने योग्य घटना के रूप में @ kasakka का उल्लेख किया। - Aaron
यह फ़ायरफ़ॉक्स में काम नहीं करता है - ccsakuweb
इस प्रस्तावित समाधान को प्रस्तुत करने के दो साल बाद यह माना जाता है कि jQuery ने काफी बदलाव किया है कि आप पिछले समाधान में संभावनाओं पर विचार नहीं करते हैं। "यह फ़ायरफ़ॉक्स में काम नहीं करता है" जब मैंने इसे प्रस्तुत किया है तो संदर्भ पर विचार नहीं करता है .. - Norm


lex82 का संस्करण लेकिन .sortable () के लिए

 start: function(event, ui){
 ui.item.find('.ui-widget-header').addClass('noclick');
 },

और आपको केवल इसकी आवश्यकता हो सकती है:

 start: function(event, ui){
 ui.item.addClass('noclick');
 },

और यहां मैं टॉगल के लिए उपयोग कर रहा हूं:

$("#datasign-widgets .ui-widget-header").click(function(){
if ($(this).hasClass('noclick')) {
$(this).removeClass('noclick');

}
else {
$(this).next().slideToggle();
$(this).find('.ui-icon').toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
}
});

3
2018-01-10 20:24



ऐसा प्रतीत होता है कि jquery UI 'ui-sortable-helper' वर्ग को उस आइटम में जोड़ता है जिसे सॉर्ट किया जा रहा है। तो, आप 'नोक्लिक' कक्षा छोड़ सकते हैं और बस ($ (यह) .hasClass ('ui-sortable-helper')) कर सकते हैं। उस तरह से और अधिक terse - Matt De Leon


डिफ़ॉल्ट को रोकने के बिना साशा के उत्तर के लिए एक संभावित विकल्प:

var tmp_handler;
.sortable({
        start : function(event,ui){
            tmp_handler = ui.item.data("events").click[0].handler;
            ui.item.off();
        },
        stop : function(event,ui){
            setTimeout(function(){ui.item.on("click", tmp_handler)}, 300);
        },

3
2017-11-09 19:10





JQuery यूआई में, खींचे जा रहे तत्वों को कक्षा "ui-draggable-dragging" दिया जाता है।
इसलिए हम इस वर्ग का उपयोग यह निर्धारित करने के लिए कर सकते हैं कि क्लिक करना है या नहीं, बस ईवेंट में देरी करें।
आपको "स्टार्ट" या "स्टॉप" कॉलबैक फ़ंक्शंस का उपयोग करने की आवश्यकता नहीं है, बस करें:

$('#foo').on('mouseup', function () {
    if (! $(this).hasClass('ui-draggable-dragging')) {
        // your click function
    }
});

यह "mousedown" या "क्लिक" की बजाय "माउसअप" से ट्रिगर किया गया है - इसलिए थोड़ी देर हो चुकी है, शायद सही नहीं हो सकता है - लेकिन यहां सुझाए गए अन्य समाधानों की तुलना में यह आसान है।


3
2018-03-04 18:32



सुंदर नहीं है, लेकिन यह काम करता है - Pedro Romão


इस और कुछ धागे के माध्यम से पढ़ने के बाद यह वह समाधान था जिसके साथ मैं गया था।

var dragging = false;
$("#sortable").mouseover(function() {
    $(this).parent().sortable({
        start: function(event, ui) {
            dragging = true;
        },
        stop: function(event, ui) {
            // Update Code here
        }
    })
});
$("#sortable").click(function(mouseEvent){
    if (!dragging) {
        alert($(this).attr("id"));
    } else {
        dragging = false;
    }
});

1
2017-09-09 17:11





क्या आपने event.preventDefault () का उपयोग करके लिंक को अक्षम करने का प्रयास किया है; प्रारंभिक घटना में और ड्रैग में इसे फिर से सक्षम करने से ईवेंट को रोक दिया गया या अनबाइंड का उपयोग करके ईवेंट छोड़ दिया गया?


0
2017-11-20 16:29