Як відключити перетягування jquery-ui?

Як вимкнути перетягування jQuery, наприклад, під час повідомлення після оновлення 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 });

Отримайте або встановіть опцію для відключення після init.

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

У випадку діалогового вікна у нього є властивість під назвою перетягування, встановіть її на значення false.

$("#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
});

У мене є більш просте та елегантне рішення, яке не змішує класи, стилі, непрозорість та інше.

Для елемента, який можна перетягнути - ви додаєте подію 'start', яка буде виконуватися кожного разу, коли ви намагаєтесь кудись перенести елемент. У вас буде умова, переїзд якої не є законним. Для незаконних ходів - запобігайте їм за допомогою '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>