StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><a href="http://jsfiddle.net/MMyP3/5/" rel="nofollow">http://jsfiddle.net/MMyP3/5/</a></p> <p><strong>EDIT:</strong> Code as requested:</p> <p>HTML:</p> <pre><code><div id="container" style="display:inline"> <div id="column1" class="column"> <div class="element">Element 1</div> <div class="element">Element 4</div> </div> <div id="column2" class="column"> <div class="element">Element 2</div> <div class="element">Element 3</div> </div> <div id="column3" class="column"> </div> </code></pre> <p>CSS:</p> <pre><code>.column{ border: 1px solid #E9EAEA; border-radius: 5px 5px 5px 5px; margin: 10px; min-width:100px; padding: 5px; float:left; width:100px; } .element{ border: 1px solid #E9EAEA; border-radius: 5px 5px 5px 5px; } </code></pre> <p>Javascript:</p> <pre><code>$('.column').sortable({ var $this = $(this); activate: function(en, ui) { $this.css('min-height', '100px'); $this.css('background-color', '#666'); }, deactivate: function(en, ui) { $this.css('min-height', '0px'); $this.css('background-color', '#FFF'); }, placeholder: 'ui-state-highlight' }); $('.column').sortable('option', 'connectWith', '.column'); </code></pre> <p><strong>Edit:</strong> I updated my link, I think the main issue was your html structure which I adjusted, also make sure you are dragging the elements to the top of the empty <code>divs</code>. Just because you are changing the background color and min-height doesn't mean the actual sortable's height is changing. So it may look like you can place the items any where in the open area, in reality you actually can't, unless you define heights for the sortables on the get go.</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