Despertaweb
Despertaweb

Reputation: 1820

Disable drag when drag stops

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

Answers (2)

Joe
Joe

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

batanasov
batanasov

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

Related Questions