Tornando elemento arrastável após toggleClass - jquery, jquery-ui, toggleclass

Meu objetivo é tornar um elemento arrastável usando a interface do usuário do jQuery se tiver uma determinada classe presente. A classe é adicionada usando toggleClass no dblclick.

Adicionando a classe "draggable" ao elemento direito ao clicar duas vezes:

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

Então eu uso isso para tornar o elemento arrastável:

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

Só isso não vai funcionar. O toggleClass é bem sucedido mas não é arrastável.

Respostas:

Você está adicionando a classe dinamicamente depois que o primeiro drggable é acionado em seus elementos e não será avaliado em tempo real.

Você pode adicionar o código quando estiver adicionando a classe e ativá-lo / desativá-lo se já estiver anexado:

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

Demonstração: http://jsfiddle.net/IrvinDominin/8J7sq/

Ele não está funcionando porque você está declarando $ (". Draggable"). Draggable () e, em seguida, adiciona a classe a um elemento.

$ (". draggable"). draggable () somente fará com que os elementos atuais na página tenham draggable classes arrastáveis.

você pode tentar algo parecido

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