Как отключить перетаскиваемый jquery-ui?

Question

Как отключить перетаскивание jQuery, например во время обратной передачи UpdatePanel?

Answer 1

Может создать функции DisableDrag (myObject) и EnableDrag (myObject)

myObject.draggable( 'disable' )

Тогда

myObject.draggable( 'enable' )

Answer 2

Чтобы временно отключить перетаскиваемое поведение, используйте:

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

Чтобы удалить перетаскиваемое поведение навсегда, используйте:

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

Answer 3

Чтобы включить / отключить перетаскивание в 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

Answer 4

Мне потребовалось немного времени, чтобы выяснить, как отключить перетаскивание при перетаскивании - используйте ui.draggable для ссылки на объект, перетаскиваемый изнутри функции отбрасывания:

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

HTH кто-то

Answer 5

Похоже, никто не смотрел на оригинальную документацию. Может быть, тогда этого не было))

Инициализировать перетаскиваемый объект с указанной отключенной опцией.

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

Получить или установить отключенную опцию после инициализации.

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

Answer 6

В случае диалога, у него есть свойство с именем draggable, установите его в false.

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

Несмотря на то, что вопрос старый, я попробовал предлагаемое решение, и оно не сработало для диалога. Надеюсь, что это может помочь другим, как я.

Answer 7

У меня есть более простое и элегантное решение, которое не портит классы, стили, непрозрачность и прочее.

Для перетаскиваемого элемента - вы добавляете событие 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();
            }    

        }
    });

Добро пожаловать:)

Answer 8

Вот как это будет выглядеть внутри .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
});

Answer 9

Изменить атрибут draggable с

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

до

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