Databases
StackOverflow2013
Postsdbo
POjQuery UI - Sortable flies in from top
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI - Sortable flies in from top
    text
    copied!<p><strong>UPDATE</strong></p> <ul> <li><p>Included some sample code and screenshots</p></li> <li><p>Problem <strong>only</strong> happens in Chrome and Chromium, not Firefox</p></li> </ul> <p><strong>While hovering and clicking on a sortable row</strong></p> <p><img src="https://i.stack.imgur.com/yrYob.png" alt="enter image description here"></p> <p><strong>Within milliseconds of moving the mouse (dragging row), the same row "flies in" from the top</strong></p> <p><img src="https://i.stack.imgur.com/X1H6L.png" alt="enter image description here"></p> <p>I am experiencing a <strong>very</strong> odd issue with <code>jquery UI sortables</code> while using Twitter Bootstrap and a table.</p> <p>I've made the table rows within <code>tbody</code> sortable in order for the user to change the order of the rows. However, while the sorting and dropping works, when you click on the row, mousedown, and then drag it to another position, the row seems to first "fly in" from the top, rather than originate from the original position on the screen.</p> <p>While this may seem novel at first, it gets old quite quickly and is clearly a big.</p> <p>I have never seen this issue before and was wondering if anyone else has any experience.</p> <p>I am also using <a href="http://exacttarget.github.io/fuelux/#wizard" rel="nofollow noreferrer">Fuel UX's Wizard</a>, and am unsure whether this is the issue. I have removed the CSS for Fuel UX and the issue remains.</p> <p>I am also using <a href="http://addyosmani.github.io/jquery-ui-bootstrap/" rel="nofollow noreferrer">jqueryUI bootstrap</a>, but it seems this CSS has nothing to do with it either.</p> <p><strong>JS</strong></p> <p><code> function sorttable (ID) { var mytable = $('#' + ID) mytable.find('tbody').sortable({ update: function(){ updateorder() } }) } </code></p> <p><strong>HTML</strong></p> <pre><code>&lt;table id="ID"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </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