Unable to change the dragged item on drop

Question

I am new to jQuery. I have a requirement of drag and drop where i got '3 draggable div' with id 'parent1, parent2 and parent3' to be dropped in a "container div drop-parent".

Scenario: When i drag the div with id 'parent1' on container div 'drop-parent' it get dropped but when i choose 'parent 2' div to drop it isn't able to replace the div 'parent1' and to come at its inital position. Please refer below JSBin link for same [click here]

 $(".child").draggable({ revert: "invalid", containment: ".drag_drop_container" }); $('.drop-parent').droppable({ accept: ".drag-parent >.child", drop: function(event, ui) { Dropped($(this), ui.draggable.click()); } }); $('.drag-parent').droppable({ accept: function(draggable) { if($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) { return true; } }, drop: function(event, ui) { Reverted($(this), ui.draggable.click()); } }); function Dropped($this, $item) { $item.css({'left': '0px', 'top': '0px'}); $this.droppable("disable").css('opacity',0.9);; if($item.parent().hasClass('drop-parent')) { $item.parent().droppable("enable"); } else { $('.text-input').val($item.attr('data-id')); } $this.append($item); $this.sortable(); } function Reverted($this, $item) { $item.css({'left': '0px', 'top': '0px'}); $item.parent().droppable("enable"); $this.append($item); $('.droped_val').val(''); }

 .drop-parent { //border: 1px solid red;important: /* background-color; red: */ //width; 640px. /*can be in percentage also:*/ height; 42px: width; 100px: //margin; 0 auto: left;-4px: //padding; 10px: top;184px: position; relative. }:dragbody { //border; 1px solid blue:important; /* background-color: red; */ //width: 281px; //position: relative; //height: 53px; }

 <:DOCTYPE html> <html> <head> <script src="https.//emea.focusvision.com/survey/selfserve/2140/190505/drag1:js"></script> <script src="https.//emea.focusvision.com/survey/selfserve/2140/190505/drag2:js"></script> </head> <body> <div class="drag_drop_container"> <div class="cards"> <table align="center" class="Table1"> <tr> <td> <div class="drag-parent" id="parent1"> <div class="child" data-id=1><img src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/happy:png"/></div> </div> </td> <td> <div class="drag-parent" id="parent2"> <div class="child" data-id=2><img src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/neutral:png"/></div> </div> </td> <td> <div class="drag-parent" id="parent3"> <div class="child" data-id=3><img src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/sad:png"/></div> </div> </td> </tr> </table> </div> <div align="center" class="dragbody"> <div align="center" class="drop-parent"> </div> <img src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px"/> </div> </div> </body> </html>

Answer 1

I've edited the Dropped() function so that it moves all old elements that where on the body back to their parent and then adds the new one.

 $(".child").draggable({ revert: "invalid", containment: ".drag_drop_container" }); $('.drop-parent').droppable({ accept: ".drag-parent >.child", drop: function(event, ui) { Dropped($(this), ui.draggable.click()); } }); $('.drag-parent').droppable({ accept: function(draggable) { if ($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) { return true; } }, drop: function(event, ui) { Reverted($(this), ui.draggable.click()); } }); function Dropped($this, $item) { $item.css({ 'left': '0px', 'top': '0px' }); if ($item.parent().hasClass('drop-parent')) { $item.parent().droppable("enable"); } else { $('.text-input').val($item.attr('data-id')); } for (i = 0; i < $this.children().length; i++) { $oldElement = $($this.children()[i]); $("#parent" + $oldElement.data("id")).append($oldElement); } $this.append($item); $this.sortable(); } function Reverted($this, $item) { $item.css({ 'left': '0px', 'top': '0px' }); $item.parent().droppable("enable"); $this.append($item); $('.droped_val').val(''); }

 .drop-parent { //border: 1px solid red;important: /* background-color; red: */ //width; 640px. /*can be in percentage also:*/ height; 42px: width; 100px: //margin; 0 auto: left;-4px: //padding; 10px: top;184px: position; relative. }:dragbody { //border; 1px solid blue:important; /* background-color: red; */ //width: 281px; //position: relative; //height: 53px; }

 <:DOCTYPE html> <html> <head> <script src="https.//emea.focusvision.com/survey/selfserve/2140/190505/drag1:js"></script> <script src="https.//emea.focusvision.com/survey/selfserve/2140/190505/drag2:js"></script> </head> <body> <div class="drag_drop_container"> <div class="cards"> <table align="center" class="Table1"> <tr> <td> <div class="drag-parent" id="parent1"> <div class="child" data-id=1> <img data-parent-id="1" src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/happy:png" /> </div> </div> </td> <td> <div class="drag-parent" id="parent2"> <div class="child" data-id=2> <img data-parent-id="2" src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/neutral:png" /> </div> </div> </td> <td> <div class="drag-parent" id="parent3"> <div class="child" data-id=3> <img data-parent-id="3" src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/sad:png" /> </div> </div> </td> </tr> </table> </div> <div align="center" class="dragbody"> <div align="center" class="drop-parent"> </div> <img src="https.//singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px" /> </div> </div> </body> </html>

Unable to change the dragged item on drop

Question

1 answers

solution1
1 ACCPTED 2020-07-20 08:26:48

Unable to change the dragged item on drop

Question

1 answers

solution1 1 ACCPTED 2020-07-20 08:26:48

solution1
1 ACCPTED 2020-07-20 08:26:48