StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I am not sure if the code in the fiddle was the original source or was the generated markup after jQueryUI had finished running on it. But you do not need to add <em>any</em> classes for <a href="http://jqueryui.com/sortable/" rel="nofollow"><code>.sortable()</code></a> to work. Simply calling <code>.sortable()</code> on the element who's children you wish to be sortable is enough.</p> <p>So you should remove the <code>ui-sortable</code> class from your code and use the parent container in the selector that <code>.sortable()</code> is called on, for example just <code>$(".dummy-deviceList").sortable();</code> <strong>not</strong> <code>$(".dummy-deviceList .dummy-device").sortable();</code>. However it also seems that the presence of <code>float:left</code> on the <code>.dummy-device-descr</code> causes the placeholder to not function correctly.</p> <p>The placeholder float problem looks like it might be <a href="http://bugs.jqueryui.com/ticket/7501" rel="nofollow">ticket#7501</a> (open at time of writing) with jQueryUI, however I suspect it is simply the case that floating the sortable elements is conflicting with the absolutely positioned placeholder since the elements being sorted have been floated out of normal flow.</p> <p>So the changes you need to make are:</p> <ol> <li>Remove <code>.dummy-device-descr float:left</code></li> <li>Remove ui-sortable class from <code>class="dummy-device"</code> elements</li> <li>Change selector from <code>$(".dummy-deviceList .dummy-device")</code> to <code>$(".dummy-deviceList")</code></li> </ol> <p>Further to this, I will add that your code is suffering a a bit of <a href="http://www.apaddedcell.com/div-itis-what-it-and-how-avoid-it" rel="nofollow">Divitis</a> and would certainly benefit (for the reasons in the linked article) from a little tidying up.</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