Jquery draggable does not allow dragging clone images

I am trying to delete an image in a div in order to create clones of images inside this div whose id is cesta, but I get only the forbidden character.

HTML

<div id='productos' > <h3>PRODUCTOS</h3> <img id='ali-12' name='serv' class='productos' src='img/objects_139.jpg' /> <img id='mon-23' name='serv' class='productos' src='img/objects_132.jpg' /> <img id='zap-32' name='serv' class='productos' src='img/objects_135.jpg' /> <img id='gua-21' name='serv' class='productos' src='img/objects_102.jpg' /> <img id='rod-11' name='serv' class='productos' src='img/objects_136.jpg' /> <img id='maz-44' name='serv' class='productos' src='img/objects_137.jpg' /> <img id='lla-97' name='serv' class='productos' src='img/objects_138.jpg' /> <img id='par-10' name='serv' class='productos' src='img/objects_126.jpg' /> <img id='cru-24' name='serv' class='productos' src='img/objects_121.jpg' /> <img id='gaf-15' name='serv' class='productos' src='img/objects_131.jpg' /> </div> <div id='cesta'> </div> 

JAVASCRIPT

 $(document).ready(function(){ $(".productos").draggable({helper:'clone'}); $("#cesta").droppable({ accept: ".productos", drop: function(event,ui){ $(this).append($(ui.draggable).clone()); } }); }); 
+4
source share
1 answer

Your code looks fine. I tried this and it works great.

All I did, except what you inserted, is:

1) Added 2 libs

2) Added some css

JS code is the same as yours.

 <script src="libs/jquery.js"></script> <script src="libs/jquery_ui.js"></script> <div id='productos' > <h3>PRODUCTOS</h3> <img id='ali-12' name='serv' class='productos' src='n-2.png' /> <img id='mon-23' name='serv' class='productos' src='n-3.png' /> <img id='zap-32' name='serv' class='productos' src='n-4.png' /> <img id='gua-21' name='serv' class='productos' src='n-5.png' /> <img id='rod-11' name='serv' class='productos' src='n-6.png' /> <img id='maz-44' name='serv' class='productos' src='n-7.png' /> </div> <div id='cesta'> <script> $(document).ready(function(){ $(".productos").draggable({helper:'clone'}); $("#cesta").droppable({ accept: ".productos", drop: function(event,ui){ $(this).append($(ui.draggable).clone()); } }); }); </script> 

http://jsfiddle.net/janakshah89/sSRXk/1/

0
source

Source: https://habr.com/ru/post/1479409/


All Articles