title: jQuery + HTML5 Sortable: Buggy and flickering when I do drag and drop
body: <p>Here's my JS Fiddle: <a href="http://jsfiddle.net/s3ZpF/2/" rel="nofollow">http://jsfiddle.net/s3ZpF/2/</a></p>
  
  <p>When I grab any of the <code>&lt;li</code>>...</li>`s from the left and try to drag it to the middle right one and leave my mouse over it without letting go of my mouse, it flickers constantly. It also doesn't work if I let it go (it's inconsistent). Ex:</p>
  
  <p>1 2</p>
  
  <p>3 4</p>
  
  <p>5 6</p>
  
  <p>When I drag #1, #3, or #5 to #4 and before I let go, it flickers. Is there something wrong with my HTML? I don't get why it does that when the demo on the site doesn't do that: <a href="http://farhadi.ir/projects/html5sortable/" rel="nofollow">http://farhadi.ir/projects/html5sortable/</a> (find sortable grid)</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;ul class="sorted_list clearfix"&gt;
          &lt;li&gt;
                  &lt;div&gt;
                  &lt;img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" /&gt;
                  &lt;span&gt;Collection Name1&lt;/span&gt;&lt;br&gt;
                  &lt;span&gt;Lorem ipsum sdfsfdsfs sdfdsfsdfds &lt;/span&gt;
  
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div&gt;
                  &lt;img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" /&gt;
                  &lt;span&gt;Collection Name2&lt;/span&gt;&lt;br&gt;
                  &lt;span&gt;Lorem ipsum sdfsfdsfs sdfdsfsdfds &lt;/span&gt;
  
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div&gt;
                  &lt;img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" /&gt;
                  &lt;span&gt;Collection Name3&lt;/span&gt;&lt;br&gt;
                  &lt;span&gt;Lorem ipsum sdfsfdsfs sdfdsfsdfds &lt;/span&gt;
  
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div&gt;
                  &lt;img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" /&gt;
                  &lt;span&gt;Collection Name4&lt;/span&gt;&lt;br&gt;
                  &lt;span&gt;Lorem ipsum sdfsfdsfs sdfdsfsdfds &lt;/span&gt;
  
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div&gt;
                  &lt;img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" /&gt;
                  &lt;span&gt;Collection Name5&lt;/span&gt;&lt;br&gt;
                  &lt;span&gt;Lorem ipsum sdfsfdsfs sdfdsfsdfds &lt;/span&gt;
  
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div&gt;
                  &lt;img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" /&gt;
                  &lt;span&gt;Collection Name6&lt;/span&gt;&lt;br&gt;
                  &lt;span&gt;Lorem ipsum sdfsfdsfs sdfdsfsdfds &lt;/span&gt;
  
                  &lt;/div&gt;
              &lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.sorted_list {
      width: 650px;
  }
  
  .sorted_list li {
      list-style: none;
      margin: 5px;
      line-height: 60px;
      float: left;
      width: 250px;
  }
  
  .col_images {
      max-width: 60px;
      ma-height: 60px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <p><code>$(".sorted_list").sortable();</code></p>