Question

The problem I am running into is that if you drag up just slightly (5-10px-ish) and drop…it stacks the dropped list object on top of the first list object. If you move it more than that, it works fine…it only fails when the object is moved slightly and dropped.

I am using the latest version of JQuery and JQuery UI.

Anybody seen this issue or know what it might be caused by? Thanks

In terms of code, I am using the basic sortable functionality here:

#object_list {list-style: none;}
#object_list li {width: 264px; display: inline-block; color: #FFF; position: relative;    margin-right: 5px; margin-left: -33px; padding: 10px 8px 7px 48px; cursor: pointer;}
#object_list li:hover {background: #12191F;}

$(document).ready(function(){                      
    $(function() {
        $("#object_list").sortable();
        $("#object_list").disableSelection();
    });
});

<ul id="object_list">
    <li onClick="window.location = 'page.php'">
         <a href="page.php">
         <img alt="" src="imagesource.jpg" style="width: 28px; height: 28px; border: 1px solid #0C1013; background: #181E26; padding: 2px; position: absolute; top: 10px; left: 8px;" />
         </a>
         <span style="float: left; word-wrap: break-word; color: #EEE; font-size: 15px; font-weight: bold; font-family: 'Source Sans Pro'; text-shadow: 0px 1px 1px #000;">Name of Group</span>
    </li>
    .
    .
    .
</ul>

Answer 1

DEMO — Your CSS was a mess.

Your <li> tags weren’t enveloping their contents properly, thus resulting in your issues.