Why is JQuery adding a style to my appended list item?

Question

I'm using JQuery to drag items from one list and drop them onto another.

Once the item is dropped it is removed from its original list and appended to its destination list.

I've used the code below and it seems to perform perfectly fine when inspecting the DOM, however it displays incorrectly on the page. Usually outside of the list and to the top right.

My first guess is that this was a CSS issue, however the problem persists even after removing all stylesheets.

Closer inspection in the Chrome inspector reveals that an inline style is added to each list item.I'm not sure where its coming from.

Here's my code.

        $(function() {

    $( ".drag" ).draggable();

    $( ".drop" ).each(function (index){

        var title = $(this).attr('title');

        $(this).droppable({      
           accept:  title,
           activeClass: "ui-state-hover",
           hoverClass: "ui-state-active",
           drop: function( event, ui ) {

           ui.draggable.remove();
           $(this).append(ui.draggable);
           }
          }); 
    });
 });
</script>




<ul>
<li class="drag RED">RED</li>
<li class="drag BLUE">BLUE</li>
</ul>

<ul class="drop" title=".RED">
<li>Stuff</li>  
</ul>

<ul class="drop" title=".BLUE">
<li>Stuff</li>      
</ul>

Answer 1

Do you mean style like

position: relative; left: 151px; top: 32px;

if so, this is from jquery UI plugin, which tell where is your droped element, relative to parent.