drag image on multiple droppable div with same class

147
May 31, 2018, at 00:50 AM

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.

Answer 1

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>

Rent Charter Buses Company
READ ALSO
How to properly add JSON data following other JSON data using Javascript / jQuery

How to properly add JSON data following other JSON data using Javascript / jQuery

I started programming a year ago and I'm quite new at Javascript/jQuery languagesI'm currently doing an internship as a web developper, and I have to work a lot with JSON files

130
$.extend is not a function with React SSR

$.extend is not a function with React SSR

I am facing an issue in react SSR

265
jQuery wait until Ajax call has got data before displaying

jQuery wait until Ajax call has got data before displaying

I have a Jquery Ajax script that looks like this

220
Change part of image src/dataimage attribute on particular active div

Change part of image src/dataimage attribute on particular active div

Thanks for dropping by and taking your time to read thisMuch appreciated

144