CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropjquery-ui-draggable
met.lord
met.lord

Reputation: 618

Drag and Drop with restricted drop zones

This is my first time trying to use drag and drop controls but I'm having problems figuring out how it works. Currently I have two DIVs and I want to move elements from one div to another. Using draggable allows me to place the DIVS anywhere which is something I don't want, I want to limit the area where the element is draggable.

In the other hand, I've seen the jquery UI examples and they all interact with the droppable element but I need to get the id attribute from the draggable element. This is what I've done so far, and right now I'm not only unable to make divs stay within the limited zone they should but I'm also unable to get the draggable element Id attribute.

Any help would be appreciated. Thanks.

http://jsfiddle.net/LPWhc/1/

$(function() {
  $(".draggable").draggable();
  $(".droppable").droppable({
    drop: function(event, ui) {
      var id, state;
      state = $(this).attr("name");
      id = $(this).closest(".droppable").attr("id");
      alert("Element Id: " + id);
      alert("Element New State: " + state);
    }
  });
});

Here's an updated fiddle that shows the bug I'm having right now with the draggable effect. http://jsfiddle.net/LPWhc/3/

$(function() {
    $(".draggable").draggable({ revert: 'invalid'});

    $(".droppable").droppable({
        accept: '.draggable',
        drop: function(event, ui) {
            $(this).append($(ui.helper));
            $(".draggable").addClass("item"); 
            $(".item").removeAttr("style");
            $(".item").draggable({
                revert: 'invalid'
            });
        }
    });
});

Upvotes: 2

Views: 6413

Answers (1)

Mitchell Layzell
Mitchell Layzell

Reputation: 3058

HTML:

   <div name="list-a" class="droppable">
  <h3>List A</h3>
  <div class="task-wrapper">
      <div class="draggable" id="1" name="1">
          <a href="#">Element 1</a>
      </div>
      <div class="draggable" id="2" name="3">
          <a href="#">Element 2</a>
      </div>
      <div class="draggable" id="3" name="3">
          <a href="#">Element 3</a>
      </div>
  </div>
</div>
<div name="list-b" class="droppable">
  <h3>List B</h3>
  <div class="task-wrapper">
      <div class="draggable" id="5" name="5">
          <a href="#">Element 5</a>
      </div>
      <div class="draggable" id="6" name="6">
          <a href="#">Element 6</a>
      </div>
  </div>
</div>

jQuery:

$(document).ready(function(){
    $( ".draggable" ).draggable({
    start: function( event, ui ) {
        var id = $(this).closest(".draggable").attr('id');
    }
});

$( ".droppable" ).droppable({
    accept: '.draggable',
    drop: function(event, ui){
        var id = ui.draggable.attr("id");
        alert(id);  
    }
    });
});

Upvotes: 4

Related Questions