ฉันจะปิดการใช้งาน jquery-ui draggable ได้อย่างไร

ฉันจะปิดใช้งาน jQuery draggable ได้อย่างไรเช่นในระหว่างการโพสต์แบ็ค UpdatePanel

สามารถสร้าง DisableDrag (myObject) และฟังก์ชัน EnableDrag (myObject)

myObject.draggable( 'disable' )

แล้ว

myObject.draggable( 'enable' )

หากต้องการปิดใช้งานพฤติกรรมลากได้ชั่วคราวให้ใช้:

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

หากต้องการลบพฤติกรรมที่ลากได้อย่างถาวรให้ใช้:

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

ในการเปิด / ปิดการลากใน jQuery ฉันใช้:

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

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

คำตอบ @Calciphus ใช้ไม่ได้กับปัญหาความทึบของฉันดังนั้นฉันจึงใช้:

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

ทำงานบนอุปกรณ์มือถือได้เช่นกัน

นี่คือรหัส: http://jsfiddle.net/nn5aL/1/

เปิดใช้งานปิดการใช้งานลากได้jqueryความทึบปัญหาhtml

ฉันใช้เวลาพอสมควรในการหาวิธีปิดการใช้งานการลากเมื่อวาง - ใช้ui.draggableเพื่ออ้างอิงวัตถุที่ลากจากภายในฟังก์ชันวาง:

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

HTH คน

ดูเหมือนว่าไม่มีใครดูเอกสารต้นฉบับ อาจจะไม่มีตอนนั้นก็ได้))

เริ่มต้นการลากด้วยตัวเลือกปิดใช้งานที่ระบุ

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

รับหรือตั้งค่าตัวเลือกปิดใช้งานหลังจากเริ่มต้น

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

ในกรณีของกล่องโต้ตอบจะมีคุณสมบัติที่เรียกว่าลากได้ตั้งค่าเป็นเท็จ

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

แม้ว่าคำถามจะเก่า แต่ฉันลองใช้วิธีแก้ปัญหาที่เสนอแล้ว แต่ก็ใช้ไม่ได้กับกล่องโต้ตอบ หวังว่านี่อาจช่วยคนอื่น ๆ เช่นฉัน

ต่อไปนี้จะเป็นลักษณะภายในของ .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
});

ฉันมีวิธีแก้ปัญหาที่เรียบง่ายและสง่างามที่ไม่ทำให้ชั้นเรียนสไตล์โอปปาติกะและสิ่งของต้องวุ่นวาย

สำหรับองค์ประกอบที่ลากได้ - คุณเพิ่มเหตุการณ์ 'เริ่ม' ซึ่งจะดำเนินการทุกครั้งที่คุณพยายามย้ายองค์ประกอบไปที่ใดที่หนึ่ง คุณจะมีเงื่อนไขที่การย้ายไม่ถูกกฎหมาย สำหรับการเคลื่อนไหวที่ผิดกฎหมาย - ป้องกันด้วย '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();
            }    

        }
    });

ยินดี :)

เปลี่ยนdraggableแอตทริบิวต์จาก

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

ถึง

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