Databases
StackOverflow2013
Postsdbo
POWhy is this jQuery sortables setup so unreliable/unstable?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is this jQuery sortables setup so unreliable/unstable?
    primarykey
    data
    text
    <p>I have a page setup where the main aim is to allow users to drag and re-order a set of green blocks from one sliding area to another (have a go by dragging a block to the right of the container).</p> <p>The problem is that when I drag them from area to area the dropping and general sortable-ness is unreliable in that sometimes the area where you can drop the box disappears, or the boxes align incorrectly (shown in the image below)</p> <p><strong>Before being dragged</strong></p> <p><img src="https://i.stack.imgur.com/dABVB.png" alt="blocks before being dragged"></p> <p><strong>When being dragging</strong></p> <p><img src="https://i.stack.imgur.com/9Flip.png" alt="blocks being dragging"></p> <p>As you can see when the top left block is dragged it cause the lower one to 'jump' over to the other side. I think this could be caused by having the placeholder option in the JS as if I remove it this no longer happens :/</p> <p>Also <strong>(and more worryingly)</strong> when dragging over a block from, e.g. the right area to the left, sometimes a placeholder does not even show!!</p> <p><strong>Placeholder not showing</strong></p> <p><img src="https://i.stack.imgur.com/N8t5Y.png" alt="no placeholder showing on block drag"></p> <p>I had to use <code>$( "#areaOne, #areaTwo" ).sortable( "refresh" );</code> in the code also to get the connected container to even notice a block is being dragged into it! Maybe it is not 'refreshing' correctly..?</p> <p><strong>Does anyone have any ideas as to how I could fix these unreliable/unstable sortable issues?</strong></p> <p><strong>The live code can be found here ></strong> <a href="http://jsfiddle.net/WqZ9m/19/" rel="nofollow noreferrer">http://jsfiddle.net/WqZ9m/19/</a></p> <hr> <h2>UPDATE:</h2> <p>Removing the border from the placeholder class has sorted the 'jumping' issue, but the placeholder still disappears sometimes when a block is being dragged between areas. The issue goes when the scrolling does not take place (ie. when you remove the scrolling code and drag directly from one area to another), so I'm guessing that the issue is within the main 'if' statement.</p> <p>From looking at the live HTML I have also noticed that when the place hold disappears, it's actually jumping back to the area from which it was originally dragged!</p> <p><strong>Updated Code ></strong> <a href="http://jsfiddle.net/WqZ9m/20/" rel="nofollow noreferrer">http://jsfiddle.net/WqZ9m/20/</a></p> <p><strong>Here is a Screen recording of the current problem</strong> > <a href="http://www.youtube.com/watch?v=V-mxOQ2ke28" rel="nofollow noreferrer">http://www.youtube.com/watch?v=V-mxOQ2ke28</a></p> <p>You will see that the placeholder (the yellow area) disappears :/</p> <p>Any replies are really appreciated, thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMac
    1. USMac
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhy is this jQuery sortables setup so unreliable/unstable?
      1. USMac
      1. VTBountyStart
    2. VO
      singulars
      1. POWhy is this jQuery sortables setup so unreliable/unstable?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POWhy is this jQuery sortables setup so unreliable/unstable?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThe 'jumping' problem is because of your stylesheet. Notice how it adds a border to the placeholder? That causes its size to increase, shifting the remaining stationary elements.
      singulars
      1. POWhy is this jQuery sortables setup so unreliable/unstable?
      1. USSam Dufel
    2. COAhh, brilliant removing the border from the placeholder has stopped the blocks from 'jumping around' but the placeholder still disappears sometimes when a block is being dragged between areas :/ That's got to be a JavaScript issue right?
      singulars
      1. POWhy is this jQuery sortables setup so unreliable/unstable?
      1. USMac
    3. COWorks fine on my macbook air on chrome as of right now.
      singulars
      1. POWhy is this jQuery sortables setup so unreliable/unstable?
      1. USAlienWebguy
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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