Делаем элемент перетаскиваемым после toggleClass

Моя цель — сделать элемент перетаскиваемым с помощью пользовательского интерфейса jQuery, если в нем присутствует определенный класс. Класс добавляется с помощью toggleClass на dblclick.

Добавление класса «перетаскивания» к правому элементу при двойном щелчке:

    $("article.spread").dblclick(function() {
        $(this).toggleClass("draggable");
    });

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

    $( ".draggable" ).draggable();

Только не получится. ToggleClass выполнен успешно, но его нельзя перетаскивать.


jquery jquery-ui toggleclass
person adalsteinn    schedule 04.04.2014    source источник
comment
Посмотрите на stackoverflow.com/a/13630121/588973.   -  person Deele    schedule 04.04.2014
comment
Вы можете просто заменить .toggleClass(...) на .draggable(). В связи с этим имейте в виду, что инициализация одного и того же виджета для одного и того же элемента несколько раз совершенно допустима и будет вести себя ожидаемым образом.   -  person blgt    schedule 04.04.2014

Ответы (2)


arrow_upward
0
arrow_downward

Вы добавляете класс динамически после того, как первый drggable запускается для ваших элементов и не будет оцениваться в реальном времени.

Вы можете добавить drggable при добавлении класса и включить/отключить его, если он уже подключен:

$("article.spread").dblclick(function () {
    $(this).toggleClass("draggable");
    if ($(this).data('draggable')) {
        $(this).draggable('option', 'disabled') ? $(this).draggable('enable') : $(this).draggable('disable');
    } else {
        $(this).draggable();
    }
});

Демонстрация: http://jsfiddle.net/IrvinDominin/8J7sq/

person Irvin Dominin    schedule 04.04.2014
comment
Это почти то, что я ищу. Единственная проблема заключается в том, что элемент по-прежнему можно перетаскивать после того, как я удалю класс, дважды щелкнув элемент во второй раз. Как я могу снова отключить перетаскивание? - person adalsteinn; 04.04.2014
comment
@adalsteinn элемент нельзя перетаскивать из-за отключения на нем, попробуйте и не путайте его с выделением текста - person Irvin Dominin; 04.04.2014
comment
Моя проблема заключалась в том, что я использовал неправильную библиотеку пользовательского интерфейса jQuery/jQuery. Это работает очень хорошо! Спасибо. - person adalsteinn; 04.04.2014

arrow_upward
0
arrow_downward

Это не работает, потому что вы объявляете $(".draggable").draggable(), а затем добавляете класс к элементу.

$(".draggable").draggable() сделает перетаскиваемыми только текущие элементы на странице, имеющие класс draggable.

вы можете попробовать что-то вроде

$("article.spread").dblclick(function() {
     if ($(this).data('draggable')) {
        $(this).draggable({ cancel: "div" });
        $(this).data('draggable', false);
     }
     else {
        $(this).draggable();
        $(this).data('draggable', true);
     }
});
person Azadrum    schedule 04.04.2014