Databases
StackOverflow2013
Postsdbo
POjQueryUI: Move sortable's element into droppable and back (or mootools alternative)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQueryUI: Move sortable's element into droppable and back (or mootools alternative)
    text
    copied!<p>I have one sortable which contains <em>tiles</em>. In addition, I have a bunch of droppables. I want the following interaction:</p> <p>The user can drag tiles <em>out</em> of the sortable onto some droppable. Ideally, this would <em>move</em> the tile out of the sortable and append it to the droppable. In addition, the droppable should not accept anything anymore, i.e. there may be at most one tile on one droppable. I tried it in this fiddle <a href="http://jsfiddle.net/yXeMw/2/" rel="nofollow">http://jsfiddle.net/yXeMw/2/</a> but can't get the "move" to work.</p> <p><del>Once that works, the user should also be able to move the tile <em>out</em> of the droppable back to the sortable, which I tried out here: (removed link due to 2 links limit, was version 3 of that same fiddle.) but fails too. (I only tried with an alert as I think the "move from .. to .." part should be the same.)</del> See update 1.</p> <p>I've been trying this for a few days and just can't figure it out.</p> <p>PS: I've read tons of similar questions here on SO, but none is really the same as my issue, i.e. moving the element from the sortable to the droppable.</p> <p>Edit: I would welcome an alternative solution using Mootools aswell.</p> <p><strong>Update 1:</strong> The droppable -> sortable direction only didn't work because my tiles inside the sortable had the <code>float: left</code> attribute which effectively made the sortable itself be of size 0px thus impossible to hover. Fixed fiddle: <a href="http://jsfiddle.net/yXeMw/5/" rel="nofollow">http://jsfiddle.net/yXeMw/5/</a></p> <p><strong>Update 2:</strong> Although I found a workaround (see my answer), I would still like to have a solution which <em>moves</em> the element. I couldn't get any of <code>appendTo</code> or <code>append</code> to work.</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