StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's the fiddle with the final result:</p> <p><a href="http://jsfiddle.net/39khs/82/" rel="noreferrer">http://jsfiddle.net/39khs/82/</a></p> <p>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:</p> <pre><code> $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); </code></pre> <p>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.</p> <p>The key line was by @Barry Pitman on the following SO question:</p> <p><a href="https://stackoverflow.com/questions/1254665/jquery-draggable-droppable-how-to-snap-dropped-element-to-dropped-on-element">jQuery draggable + droppable: how to snap dropped element to dropped-on element</a></p> <p>UPDATE: I had some spare time today and wanted to check if it was possible with just sortable, and lo and behold, it was.</p> <p><a href="http://jsfiddle.net/wj4ak/5/" rel="noreferrer">http://jsfiddle.net/wj4ak/5/</a></p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload