Hello, good people. Help me to understand. There is a left column in which the pictures are located and they can be dragged .draggable and there is the main content that accepts those same pictures .droppable, the pictures are cloned into the content using the clone method and again become dragged. But the problem is that when they are dragged into the content, they continue to be cloned. And I do not need this at all. How to fix the code?

html code

<div id="wraper"> <div id="heder"></div> <div id="saitbar"> <div id="element1" ><img src="images/1.png" width="100" height="100" alt="подсказка" /></div> <div id="element2" ><img src="images/2.png" width="100" height="100" alt="подсказка" /></div> <div id="element3" ><img src="images/3.png" width="100" height="100" alt="подсказка" /></div> <!--<div id="element4" ><img src="images/1.png" width="100" height="100" alt="подсказка" /></div> <div id="element5" ><img src="images/2.png" width="100" height="100" alt="подсказка" /></div> <div id="element6" ><img src="images/3.png" width="100" height="100" alt="подсказка" /></div> <div id="element7" ><img src="images/1.png" width="100" height="100" alt="подсказка" /></div> <div id="element8" ><img src="images/2.png" width="100" height="100" alt="подсказка" /></div> <div id="element9" ><img src="images/3.png" width="100" height="100" alt="подсказка" /></div>--> </div> <div id="content"> <div id="contener" class="ui-widget-content"></div> </div>

js code

 $(document).ready(function() { // пСрСтаскиваниС $('div[id*=element]').draggable({ containment: "#wraper", revert: "invalid", grid: [ 20,20 ], opacity: 0.5, scroll:false, zIndex: 35, appendTo: "body", helper: "clone", cursor: "move", stack:"div[id*=element]" }); //ΠΏΡ€ΠΈΠ΅ΠΌΠ½ΠΈΠΊ $( "#contener" ).resizable().droppable({ accept: "div[id*=element]", activeClass: "ui-state-highlight", drop: function( event, ui ) { var element = $(ui.draggable); element.fadeIn(1000, function() { $(this).clone() .addClass("newElement") .appendTo("#contener") .draggable() }); } }); });
  • 2
    press edit, select the code text and press {} repeat with variations until the text in the preview is readable. - zb '

1 answer 1

Correct what elements are accepted by droppable , indicating the source:

 $( "#contener" ).resizable().droppable({ accept: "#saitbar > div[id*=element]" ... });
  • Thanks a lot, really helped. - dmivasant
  • there is nothing :) - Pavel Azanov
  • Tell me, Pavel, how can you make it so that the droppable container can be saved together with the content that was thrown into it, on the computer in the form of a picture or pdf? - dmivasant
  • A piece of html can not be saved as a picture. But it is possible with the help of <canvas>, maybe it will suit you more? - MrFranke
  • @dmivasant: as @MrFranke said, you can't do it directly. - Pavel Azanov