Drag and Drop Positioning Problems + ID Update

Question

Hello friends of my stackoverflow. Today I have problems and need your help to solve them. If you can help with anything, it will be very appreciated! Because I really need to finish this project.

JSFiddle: https://jsfiddle.net/rdxmmobe/1/

This is the script:

<script type="text/javascript"> $(function(){ $(".DraggedItem").draggable({ helper:'clone', cursor:'move', opacity: 0.7 }); $('#rang1').droppable({ drop: function(ev, ui) { $('#rang1input').val($(ui.draggable).attr('id')); var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); $('#rang2').droppable({ drop: function(ev, ui) { $('#rang2input').val($(ui.draggable).attr('id')); var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); $('#rang3').droppable({ drop: function(ev, ui) { $('#rang3input').val($(ui.draggable).attr('id')); var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); $('#rang4').droppable({ drop: function(ev, ui) { $('#rang4input').val($(ui.draggable).attr('id')); var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); $('#rang5').droppable({ drop: function(ev, ui) { $('#rang5input').val($(ui.draggable).attr('id')); var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); $('#rang6').droppable({ drop: function(ev, ui) { $('#rang6input').val($(ui.draggable).attr('id')); var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); $('#rang7').droppable({ drop: function(ev, ui) { $('#rang7input').val($(ui.draggable).attr('id')); var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); }); </script> 

These are 7 discarded divs (where you can delete images):

 <form action="<?php echo $_SERVER["PHP_SELF"] ?>" method="POST"> <input type="hidden" value="<?php echo $row["IDBewoner"] ?>" name="bewoner"> <td> <div id="rang1"></div> <input type="hidden" value="" id="rang1input" name="rang1value"> </td> <td> <div id="rang2"></div> <input type="hidden" value="" id="rang2input" name="rang2value"> </td> <td> <div id="rang3"></div> <input type="hidden" value="" id="rang3input" name="rang3value"> </td> <td> <div id="rang4"></div> <input type="hidden" value="" id="rang4input" name="rang4value"> </td> <td> <div id="rang5"></div> <input type="hidden" value="" id="rang5input" name="rang5value"> </td> <td> <div id="rang6"></div> <input type="hidden" value="" id="rang6input" name="rang6value"> </td> <td> <div id="rang7"></div> <input type="hidden" value="" id="rang7input" name="rang7value"> </td> <input type="submit" value="Save"> </form> 

And these are draggable images (images that you can drag and drop), they come from the database and have different identifiers:

 <td> <?php echo "<img class='DraggedItem' id='".$row["IDPictogram"]."' src='data:image/jpeg;base64,".base64_encode($row['Pictogram'])."' width='90' height='90' draggable='true'>"; ?> </td> 

This is the php code:

 if($_SERVER["REQUEST_METHOD"] == "POST") { $rang1 = $_POST["rang1value"]; $rang2 = $_POST["rang2value"]; $rang3 = $_POST["rang3value"]; $rang4 = $_POST["rang4value"]; $rang5 = $_POST["rang5value"]; $rang6 = $_POST["rang6value"]; $rang7 = $_POST["rang7value"]; $bewonerID = $_POST["bewoner"]; echo "<script>alert('Rang1: $rang1')</script>"; echo "<script>alert('Rang2: $rang2')</script>"; echo "<script>alert('Rang3: $rang3')</script>"; echo "<script>alert('Rang4: $rang4')</script>"; echo "<script>alert('Rang5: $rang5')</script>"; echo "<script>alert('Rang6: $rang6')</script>"; echo "<script>alert('Rang7: $rang7')</script>"; } 

First problem: As you can see in my script above, I used "helper: 'clone", but the images with the class are ".DraggedItem" and this is not the main thing. Images must be moved and replaced between 7 divs. But they should be cloned from the source list (so that I can use the same icon twice, for example)

Second problem: I have hidden input for each div, and they must contain the id of the discarded image, so I can insert them into the database. Let's say I reset the image to Div1 (# rang1) and then moved the image to Div4 (# rang4), the image identifier remains in the hidden input of Div1 and is not deleted / updated. How can I make sure the identifier is also updated when I drop a new image into a div?

Third problem: how can I perform a check when I delete an image from the main list, what if the image is already there, the old image is deleted and replaced with a new one?


Fourth problem: What is the best way to switch between two images?

If you can help me with any of these problems, it will be very appreciated! I cannot go further without solving these problems, and I really need the help of experts.

Answer 1

I would start with some code refactoring to get rid of all the copy-paste code. Droppables can be initialized with a single call, referencing each input in the callback as $(this).next('input') .

Then I will not clone the images directly into the discarded fields to avoid duplicate IDs. I would create new image elements with a different class inside the slots, since they should behave differently when moving between slots, in my example without a translucent helper.

So, in my example, you have your DraggedItem images intact. I added the DropZone class to each reset slot to allow initialization with a single call.

When the image is discarded, I check where it came from. If it came from the library, create a new image element, set its src to the original and set the data-id data attribute to the original identifier of the element to track, if necessary. As a last step, I add the DroppedItem class and make it another type of drag and drop without a helper.

If the item is discarded, it is a DroppedItem , i.e. from another slot, just replace the contents of the containers and the corresponding input field values.

HTML

 <table> <tr> <td> <div id="rang1" class="DropZone"></div> <input type="text" value="" id="rang1input" name="rang1value" /> </td> <td> <div id="rang2" class="DropZone"></div> <input type="text" value="" id="rang2input" name="rang2value" /> </td> <td> <div id="rang3" class="DropZone"></div> <input type="text" value="" id="rang3input" name="rang3value" /> </td> <td> <div id="rang4" class="DropZone"></div> <input type="text" value="" id="rang4input" name="rang4value" /> </td> <td> <div id="rang5" class="DropZone"></div> <input type="text" value="" id="rang5input" name="rang5value" /> </td> <td> <div id="rang6" class="DropZone"></div> <input type="text" value="" id="rang6input" name="rang6value" /> </td> <td> <div id="rang7" class="DropZone"></div> <input type="text" value="" id="rang7input" name="rang7value" /> </td> </tr> </table> <img id="img1" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=1" /> <img id="img2" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=2" /> <img id="img3" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=3" /> <img id="img4" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=4" /> <img id="img5" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=5" /> <img id="img6" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=6" /> <img id="img7" class="DraggedItem" src="http://dummyimage.com/50x50/000/fff&text=7" /> 

CSS

 table { margin-bottom: 50px; } td div { width: 50px; height: 50px; border:1px solid silver; margin-bottom: 10px;} td input { width: 50px; } 

Javascript

 $('.DraggedItem').draggable({ helper: 'clone', cursor:'move', opacity: 0.7 }); var droppedOptions = { revert: 'invalid', cursor: 'move' }; $('.DropZone').droppable({ drop: function(ev, ui) { var dropped = ui.draggable; var droppedOn = $(this); if(ui.draggable.is('.DroppedItem')) { // Item is dragged from another slot, swap images var draggedFrom = ui.draggable.parent(); droppedOn.find('img').appendTo(draggedFrom); dropped.css({ top:0, left:0 }).appendTo(droppedOn); var temp = '' + droppedOn.next('input').val(); draggedFrom.next('input').val(temp); droppedOn.next('input').val(dropped.data('id')); } else { // Item is dragged from library droppedOn .empty() // Delete already dropped items .next('input') .val(dropped.attr('id')); $('<img class="DroppedItem">') .attr('src', dropped.attr('src')) .data('id', dropped.attr('id')) .draggable(droppedOptions) .appendTo(droppedOn); } } }); 

JS script example

Please note that in my example, I changed the input type to text to display, just change it to hidden , you are all set up.

Answer 2

Here is what I did: https://jsfiddle.net/Twisty/rdxmmobe/3/

 $(function () { $(".DraggedItem").draggable({ helper: 'clone', cursor: 'move', opacity: 0.7, revert: true }); $("div[id^='rang']").droppable({ drop: function (ev, ui) { var target = $("#" + $(this).attr("id") + "input"); target.val($(ui.draggable).attr('id')); var dropCopy = $("<img>"); console.log("Setting DropCopy Source: " + $(ui.draggable).attr('src')); $(dropCopy).attr('src', $(ui.draggable).attr('src')); var droppedOn = $(this); droppedOn.append(dropCopy).css({ top: 0, left: 0 }); } }); });