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

99

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

jquery-ui

148

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

myObject.draggable( 'disable' )

затем

myObject.draggable( 'enable' )

— madcolor
источник

2

Это работает. Полная документация по draggable () находится здесь . То же самое и с объектами sortable () (если вы разрешаете переупорядочивание с помощью перетаскивания)

— nickb

3

Это означает, что документы draggable () находятся (сейчас?) Здесь со ссылкой nickb, приведенной выше, для демонстрации . ;)

— ruffin

Это дает мне «невозможно вызвать методы на перетаскиваемом элементе до инициализации; попытка вызвать метод 'disable'»

— Хасиб Зульфикар

Миан Хасиб: См. Это: stackoverflow.com/questions/14955630/…

— madcolor

69

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

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

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

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

— PhilB
источник

6

Я обнаружил, что «disable» имеет побочный эффект, связанный с CSS, но уничтожение работает безупречно.

— Нильс Бринч

1

@jedanput побочным эффектом использования disable является то, что перетаскиваемые элементы отображаются серым цветом. Уничтожение, кажется, оставляет в покое внешний вид.

— самази 03

19

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

— КаринаПилар
источник

Ваш JSfiddle не работает. Кнопки не нажимаются (при использовании последней версии Chrome). Я пробовал обновить его до ссылок и звонков, button()но это не помогло.

— ashes999 02

2

из всех предоставленных решений это было единственным, которое сработало для меня на 100% - все остальные (с использованием комбинаций отключения / уничтожения и т. д.) просто не устранили проблему css. В моем приложении, использующем перетаскивание + падение, я обнаружил, что непрозрачность тех элементов, которые перетаскивались после инициализации, отличалась от непрозрачности тех, которые не были затронуты. Все очень грязно. Спасибо @CarinaPilar как за решение, так и за jsfiddle, чтобы доказать это.

— Энди Лоренц

11

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

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

HTH кто-то

— Оли Studholme
источник

Спасибо за это. Это решение, похоже, хорошо работает при использовании директив перетаскивания / отбрасывания в AngularJS.

— Banjo Drill

10

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

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

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

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

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

— makaroni4
источник

Это работает, но имеет побочный эффект: непрозрачность моего div составляет около 50% ... Понятия не имею, почему.

— Devil's Advocate

@ScottBeeson Каждый раз, когда вы отключаете что-то в jQuery, он добавляет класс "ui-state-disabled". Вы можете удалить его с помощью: $ (". Ui-draggable"). RemoveClass ("ui-state-disabled")

— Calciphus

7

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

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

— Maudulus
источник

3

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

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

        }
    });

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

— Объединить
источник

0

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

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

к

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

— Ддагсан
источник