Im trying to develop a small page that has the following functionality:
I had never used jQuery before, and I even had a working page prototype before, where I already had the drag and drop between two containers through native HTML5 drag and drop events, but when I added the sortable() jquery functionality to #drop, the images could no longer be dragged back to #origin, which breaks my functionality.
So, I started over and wanted to implement both the drag & drop functionality as well as the sortable with jQuery. I've read pretty much the whole API for all draggable, droppable and sortable functionality, but I'm having trouble getting this to work. Not sure if it's the settings I'm using for each functionality.
On the fiddle, you can see that the images become draggable and I can see the settings I specify in effect (opacity, cursor), but the images cant be dropped on #drop.
From what I understand, the combination of making images draggable, the images having a "draggable" class, and making #drop droppable with an accepts of ".draggable", it should allow the most basic functionality, but even that doesn't seem to take. Also I read that if both draggable and droppable have the same "scope" setting, it should also work, but it isn't.
Here's a simple version of the page's code, plus a jsFiddle: http://jsfiddle.net/39khs/
Code:
css:
#origin { background-color: green; } #drop { background-color: red; min-height: 120px; }
js:
$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" }); $("#drop").droppable({ accept: ".draggable", scope: "drop"}); $("#drop").sortable();
html:
<div id="wrapper"> <div id="origin" class="fbox"> <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" /> <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" /> <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" /> </div> <p>test</p> <div id="drop" class="fbox"> </div> </div>
Any help is greatly appreciated.
Here's the fiddle with the final result:
http://jsfiddle.net/39khs/82/
The key was to handle the "drop" event and manually removing the dropped image from #origin and add it to #drop. That is actually what I was doing on the first implementation, but did not know how to do it exactly with jQuery:
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
I am not sure why jQuery does not really remove the dragged element from the old container and add it to the new one, but that is what had to be done for the newly dropped item to display correctly and not just exactly where it was dropped, disregarding css placing/styling.
The key line was by @Barry Pitman on the following SO question:
jQuery draggable + droppable: how to snap dropped element to dropped-on element
UPDATE: I had some spare time today and wanted to check if it was possible with just sortable, and lo and behold, it was.
http://jsfiddle.net/wj4ak/5/
just two lines of code allow dragging and dropping from one container to another, and sorting the items. They do not need to be inside ul/ol lists at all. The one annoying thing is that I did not intend to make the items on the origin div sortable, but it's something I can live with for now.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With