Search code examples
jqueryhtmljquery-uijquery-ui-draggablejquery-ui-droppable

drag image on multiple droppable div with same class

I'm trying to make images droppable on multiple divs, I'd like to only have 1 class for the "drop zones" and only 1 for the draggable elements.

I managed to do it but I'm unhappy since I have to put id in the "drop zones" :

<div class="drop" id="id1"</div>

I would like to do it without the ids :

<div class="drop"</div>

Because the boxes are generated dynamically (php), even though I could generate random ID's I would like to avoid that. 

$(function() {
  var $dragElem = $(".drag"),
    $dropId1 = $("#id1")
  $dropId2 = $("#id2"),
    $dropZone = $(".drop");

  $($dragElem).draggable({
    revert: "invalid",
    helper: "clone",
    cursor: "move"
  });

  $dropId1.droppable({
    accept: $dragElem,
    drop: function(event, ui) {
      console.log(ui.draggable);
      deleteImage(ui.draggable, $(this));
      $(this).droppable("disable");
    }
  });

  $dropId2.droppable({ //same function but with different id
    accept: $dragElem,
    drop: function(event, ui) {
      console.log($(this).attr("id"));
      deleteImage(ui.draggable, $(this));
      $(this).droppable("disable");
    }
  });

  function deleteImage($item, $id) {
    $item.fadeOut(function() {
      $item.appendTo($id).fadeIn();
    });
  }
});
.drop {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<div class="drop" id="id1"></div>
<div class="drop" id="id2"></div>

<div>
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
</div>

Here is a working JSFiddle with id.

I heard about unique element nodes but were unable to use them.

Thanks for your help.

Solution

  • You don't need to use the id attributes at all. The droppable elements share the .drop class, so you can just use that directly for all cases:

    $(function() {
  var $dragElem = $(".drag"),
    $dropZone = $(".drop");

  $dragElem.draggable({
    revert: "invalid",
    helper: "clone",
    cursor: "move"
  });

  $dropZone.droppable({
    accept: $dragElem,
    drop: function(event, ui) {
      deleteImage(ui.draggable, this);
      $(this).droppable("disable");
    }
  });

  function deleteImage($item, $id) {
    $item.fadeOut(function() {
      $item.appendTo($id).fadeIn();
    });
  }
});
    .drop {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="drop"></div>
<div class="drop"></div>

<div>
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
</div>