Databases
StackOverflow2013
Postsdbo
POjQuery sortable and CSS problem
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery sortable and CSS problem
    text
    copied!<p>I'm having trouble with jQuery's sortable function. I'd like to have a block with one or more lines. And on each line is one or more links.</p> <p>My HTML</p> <pre><code>&lt;div id="links"&gt; &lt;div class="line"&gt;&lt;div class="link"&gt;Link #1&lt;/div&gt;&lt;/div&gt; &lt;div class="line"&gt; &lt;div class="link"&gt;Link #2&lt;/div&gt; &lt;div class="link"&gt;Link #3&lt;/div&gt; &lt;/div&gt; &lt;div class="line"&gt;&lt;div class="link"&gt;Link #4&lt;/div&gt;&lt;/div&gt; &lt;div class="line"&gt;&lt;div class="link"&gt;Link #5&lt;/div&gt;&lt;/div&gt; &lt;div class="line"&gt;&lt;div class="link"&gt;Link #6&lt;/div&gt;&lt;/div&gt; &lt;div class="line"&gt; &lt;div class="link"&gt;Link #7&lt;/div&gt; &lt;div class="link"&gt;Link #8&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I know how to sort the lines vertically. And I know how to sort the links on the same line. But when I try to sort links regardless of the line it gets complicated.</p> <p>Moving a link to another line is relatively easy. Just check if it leaves an empty line, if so remove it from the DOM. But adding a link between two lines (and so adding a new line) is where I get stuck.</p> <p>All help is appreciated.</p> <p>Erik</p> <p>My JavaScript:</p> <pre><code>$('#links .line').sortable({ connectWith: '.line', forcePlaceholderSize: true, placeholder: 'droppable', tolerance: 'intersect', revert: true, update: function(event, ui) { $('.line').each(function(){ if ($(this).html().trim() == '') { $(this).remove(); } }); $('.link').each(function(){ if ($(this).parent().attr('class').indexOf('line') == -1) { $(this).wrap('&lt;div class="line" /&gt;'); } }); } }); </code></pre> <p>And my CSS:</p> <pre><code>#links { margin:0 0 45px 0; } #links .line { overflow:hidden; height:auto; clear:left; width:490px; margin:0 0 10px 0; } #links .line .link { overflow:hidden; height:auto; float:left; background-color:#e5e5e5; cursor:move; padding:2px; margin:0 10px 0 0; } #links .droppable { float:left; height:16px; padding:2px; border:1px dashed #999; margin:0 10px 0 0; } </code></pre>
 

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