Search code examples
javascriptjqueryjquery-uidraggable

Stop this weird jQuery Glitch

My question is how do i fix this weird glitch in jquery.

When i move one of the boxes it makes all the other boxes shoot downwards and im not sure why its happening. does anyone know whats causing this problem?

This fiddle has all my code on it

The js:

$(document).ready(function(){
        $(function(){
            $('#container').sortable({
                connectWith: "#container",
            cursor: "move"
        }).disableSelection();
    });
});

The HTML

<div id="container">
  <div class="container-item">Item 1</div>
  <div class="container-item">Item 2</div>
  <div class="container-item">Item 3</div>
</div>

The CSS

lists {
    height: 200px;
    width: 300px;
    border: 1px solid #000000;
}

#container {
    background: lightgrey;
    width:500px;
    height: 50px;
}
.container-item {
  display: inline-block;
  width: 150px;
  height: 500px;
  background: lightblue;
  margin-right: 10px;
  margin-top: 0;
  position: relative;
  max-top: 50px;
}
Solution

  • Simply add float: left to .container-item.

    Fiddle example