В jquery drop UI, как я могу клонировать элемент перетаскивания в место размещения с правильной позицией мыши?

Question

предположим, у меня есть панель с перетаскиваемым элементом,

и выпадающий контейнер, когда я перетаскиваю элемент в контейнер,

<div id="panel">
    <div class="square"></div>  
</div>
<div id="canvas"></div>

Я хочу клонировать перетаскиваемый элемент, но проблема в том, что информация о относительной позиции также может быть скопирована

Так, как я могу просто позволить клону оставаться в позиции мыши? Вот мой код

$('.square').draggable({
        revert:"valid"
});
$('#canvas').droppable({
    drop: function (e, ui) {
        $(ui.draggable).clone().appendTo($(this));
    }
})

вот пример http://jsfiddle.net/AN5gt/

Answer 1

Я бы предложил убрать реверт, чтобы сделать анимацию более реалистичной.

    $('.square').draggable({  
      helper:"clone"  
    });  

    $('#canvas').droppable({  
      drop: function(e, ui){  
        $(ui.draggable).clone().appendTo($(this));  
      }  
    })

Answer 2

Ну, во-первых, я хотел бы поблагодарить вас за этот вопрос, и он решил один из моих собственных вопросов.

Я хочу сделать ссылку на физический файл, указанный в дереве папок. то есть для галереи изображений, я показываю полный список дерева папок, и хочу, чтобы администратор перетащил изображение и поместил в галерею.

Вот что я сделал.

$('.square').draggable({
    revert:"valid",
    helper:"clone"
});
$('#canvas').droppable({
    drop: function (e, ui) {
        $(ui.draggable).clone().appendTo($(this));
    }
})