Reputation: 1820
I have 3 blocks ( div). When there's a click in one those blocks the div is selected and it's visible by a class.
I need to disable the draggable() of the element since the stop even in the drag function. JS :
$('#llens').on("click", "#mou", function (event) {
$(this).parents(':eq(2)').draggable({
disabled: false,
containment: "parent",
scroll: false,
cursor: "move",
delay: 200,
start: function (e, ui) {
remember = $(this).html();
$(this).addClass('fantasma');
},
stop: function (e, ui) {
$(this).removeClass('fantasma');
// **WHEN IS STOPPED IT MAY DISABLE THE DRAG**
}
<div id="llens">
<div class="bloc professor" id="bloc_profes" style="top:40px; left:200px; width:800px; height:200px " data-actiu="true"></div>
<div class="bloc text" id="bloc_text" style="top:100px; left:200px; width:800px; height:100px " data-actiu="false"></div>
<div class="bloc alumne" id="bloc_alumnes" style="top:200px; left:200px; width:800px; height:200px " data-actiu="false"></div>
</div>
DEMO : http://fiddle.jshell.net/blackersoul/47YvE/5/
Upvotes: 0
Views: 154
Reputation: 15528
Use the built in destroy
method, like this:
stop: function (e, ui) {
$(this).removeClass('fantasma').draggable('destroy');
}
The documentation page is here: http://api.jqueryui.com/draggable/#method-destroy
Removes the draggable functionality completely. This will return the element back to its pre-init state.
Here it is working: http://fiddle.jshell.net/47YvE/8/
Upvotes: 1
Reputation: 229
Try changing the class of the draggable elements like:
removeClass("draggable").addClass("static");
You can also add check like:
if(hasClass("draggable"){
removeClass("draggable").addClass("static")}
Upvotes: 0