jQuery draggable leaving cloned html behind

Question

I am using jQuery UI; Draggable http://jqueryui.com/demos/draggable invoked like this:

$(document).ready(function(){

    $("#side_bar").sortable({
        revert: true
    });

    $(".draggable").draggable({ 
                              containment: 'parent', 
                              hascroll: true, 
                              handle: 'div.box_header',
                              scrollSensitivity: 100,
                              scrollSpeed: 100, 
                              axis: 'y',                                 
                              connectToSortable: '#side_bar',                                 
                              helper: 'clone',
                              opacity: 0.35 
                              }); });

You can see the html structure on http://www.sarsclan.co.uk (right side bar area).

It seems to create a transparant clone as your dragging, but when you drop it puts the draggable div in the right place, but leaves the original div in it's place and just appends the dom with a clone of that original div in its new place.

Answer 1

The demos on jqueryui Sortable show no extra draggable call, as far as I can see: http://jqueryui.com/demos/sortable/. Have you tried to do with a sortable call only?

EDIT: I can see that your code is similar to the "Draggable + Sortable" example on the jqueryui site. However, that example always clones the element at the top and inserts the clone into the sortable list, so that's not what you want to achieve.

Answer 2

Do you really mean to have " helper: ' clone' " ? What happens if you remove it?