मैं jquery-ui draggable को कैसे अक्षम कर सकता हूं?


99

मैं एक jQuery ड्रैगेबल को कैसे निष्क्रिय कर सकता हूं, जैसे कि अपडेटपैनल पोस्टबैक के दौरान?

जवाबों:


148

एक DisableDrag (myObject) और एक EnableDrag (myObject) फ़ंक्शन बना सकता है

myObject.draggable( 'disable' )

फिर

myObject.draggable( 'enable' )

2
यह काम। ड्रैगबल () के लिए पूर्ण डॉक्स यहां हैं । समान छांटने योग्य () ऑब्जेक्ट्स के लिए जाता है (यदि आप ड्रैग-एन-ड्रॉप
रिड्रेसिंग की

3
जो कहना है कि यहां ड्रैगबल () डॉक्स हैं (अब?) , निकब के लिंक के साथ, ऊपर, डेमो पर जा रहे हैं । ;)
रफिन

यह मुझे "इनिशियलाइजेशन से पहले ड्रैगेबल पर कॉल नहीं कर सकता है," मेथड 'को' डिसेबल 'कहने का प्रयास किया गया है
हसीब जुल्फिकार

मियां हसीब: इस देखें: stackoverflow.com/questions/14955630/...
madcolor

69

ड्रैग करने योग्य व्यवहार उपयोग को अस्थायी रूप से अक्षम करने के लिए:

$('#item-id').draggable( "disable" )

ड्रैग करने योग्य व्यवहार को स्थायी रूप से हटाने के लिए:

$('#item-id').draggable( "destroy" )

6
मैंने पाया कि 'डिसएबल' में सीएसएस से संबंधित साइड इफेक्ट होता है, लेकिन यह दोषपूर्ण तरीके से काम करता है।
नील्स ब्रिंच

1
@jedanput अक्षम का उपयोग करने का साइड इफेक्ट है ड्रैग करने योग्य तत्वों का एक आकर्षक स्वरूप है। विनाश अकेले उपस्थिति को छोड़ने लगता है।
samazi

19

JQuery I में ड्रैग करने योग्य को सक्षम / अक्षम करने के लिए:

$("#draggable").draggable({ disabled: true });          

$("#draggable").draggable({ disabled: false });

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

div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}

मोबाइल उपकरणों पर भी काम किया।

यहाँ कोड है: http://jsfiddle.net/nn5aL/1/


आपका JSfield काम नहीं कर रहा है। बटन क्लिक नहीं करते (नवीनतम क्रोम का उपयोग करके)। मैंने इसे लिंक और कॉलिंग में अपडेट करने की कोशिश की button()लेकिन इससे कोई मदद नहीं मिली।
ashes999

2
दिए गए सभी समाधानों में से, यह केवल एक ही था जिसने मेरे लिए 100% काम किया - सभी अन्य (अक्षम / नष्ट आदि के संयोजन का उपयोग करके) बस सीएसएस मुद्दे को ठीक नहीं किया। ड्रैग + ड्रॉप का उपयोग करने वाले मेरे ऐप में मैंने पाया कि अपारदर्शिता उन तत्वों के लिए अलग-अलग थी, जिन्हें प्रारंभिक अवस्था से ही खींचा गया था, जिन्हें छुआ नहीं गया था। सब बहुत गन्दा। यह साबित करने के लिए समाधान और jsfiddle दोनों के लिए @CarinaPilar के लिए धन्यवाद।
एंडी लोरेन्ज

11

यह मुझे थोड़ा समय लगा कि ड्रॉप-डाउन पर ui.draggableड्रैग करने योग्य को निष्क्रिय कैसे करें - ड्रॉप फ़ंक्शन के अंदर से ऑब्जेक्ट को खींचे जाने के संदर्भ के लिए उपयोग करें:

$("#drop-target").droppable({
    drop: function(event, ui) {
        ui.draggable.draggable("disable", 1); // *not* ui.draggable("disable", 1);
        
    }
});

HTH किसी


इसके लिए धन्यवाद। AngularJS में ड्रैगबल / ड्रापेबल निर्देशों का उपयोग करते समय यह समाधान अच्छी तरह से काम करता है।
बैंजो ड्रिल

10

ऐसा लगता है कि कोई भी मूल दस्तावेज को नहीं देखता है। हो सकता है उस समय ऐसा नहीं था))

निर्दिष्ट विकल्प के साथ ड्रैगबल को प्रारंभ करें।

$( ".selector" ).draggable({ disabled: true });

निष्क्रिय विकल्प प्राप्त करें या सेट करें, init के बाद।

//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );

यह काम करता है, लेकिन मेरे तलाक को लगभग 50% अस्पष्टता बनाने का एक साइड इफेक्ट है ... मुझे पता नहीं क्यों।
डेविल्स एडवोकेट

@ScottBeeson जब भी आप jQuery में कुछ अक्षम करते हैं, तो यह "यूआई-स्टेट-अक्षम" क्लास जोड़ता है। आप इसे इसके साथ निकाल सकते हैं: $ ("। Ui-draggable")। RemoveClass ("ui-state-
disable

7

एक संवाद के मामले में, इसके पास एक संपत्ति है, जिसे ड्रैगेबल कहा जाता है, इसे असत्य पर सेट करें।

$("#yourDialog").dialog({
    draggable: false
});

अंततः प्रश्न पुराना है, मैंने प्रस्तावित समाधान की कोशिश की और यह संवाद के लिए काम नहीं आया। आशा है कि यह मेरी तरह दूसरों की मदद कर सकता है।


मुझे यकीन नहीं है कि यह सवाल विशेष रूप से jQueryUI डायलॉग्स से संबंधित है , लेकिन मुझे आपकी पोस्ट मददगार लगी।
शॉन एरी

3

निम्नलिखित यह है कि यह अंदर की तरह दिखेगा .draggable({});

$("#yourDraggable").draggable({
    revert: "invalid" ,
    start: function(){ 
        $(this).css("opacity",0.3);
    },
    stop: function(){ 
        $(this).draggable( 'disable' )
    },
    opacity: 0.7,
    helper: function () { 
        $copy = $(this).clone(); 
        $copy.css({
            "list-style":"none",
            "width":$(this).outerWidth()
        }); 
        return $copy; 
    },
    appendTo: 'body',
    scroll: false
});

3

मेरे पास एक सरल और सुरुचिपूर्ण समाधान है जो कक्षाओं, शैलियों, अस्पष्टता और सामान के साथ गड़बड़ नहीं करता है।

ड्रैग करने योग्य तत्व के लिए - आप 'स्टार्ट' इवेंट को जोड़ते हैं जो हर बार जब आप एलिमेंट को कहीं ले जाने की कोशिश करते हैं, तो उसे अंजाम देगा। आपके पास एक ऐसी शर्त होगी जो चलना कानूनी नहीं है। उन चालों के लिए जो अवैध हैं - उन्हें 'e.preventDefault ();' नीचे दिए गए कोड की तरह।

    $(".disc").draggable({
        revert: "invalid", 
        cursor: "move",
        start: function(e, ui){                
            console.log("element is moving");

            if(SOME_CONDITION_FOR_ILLEGAL_MOVE){
                console.log("illegal move");
                //This will prevent moving the element from it's position
                e.preventDefault();
            }    

        }
    });

आपका स्वागत है :)


0

draggableसे विशेषता बदलें

<span draggable="true">Label</span>

सेवा

<span draggable="false">Label</span>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.