jquery перетаскивание

Question

Я хочу знать, как клонировать и добавить элемент в область сброса с помощью следующего кода:

    $(function() {
    $(".draggable").draggable();
    $(".item").droppable({
        drop: function(event, ui) {
            var $this = $(this);
            $this.append(ui.draggable);    

            var width = $this.width();
            var height = $this.height();
            var cntrLeft = width / 2 - ui.draggable.width() / 2;
            var cntrTop = height / 2 - ui.draggable.height() / 2;

            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});

Я чувствую себя счастливым, если кто-нибудь объяснит мне подробно. И, пожалуйста, попробуйте привести пример в Fiddle. Это мне очень помогает. Спасибо.

Спасибо за ваш быстрый ответ, и да, это нормально, и когда я перетащил клон, он не работает, и мне нужно поменять местами клоны, которые я поместил в ближайший каталог. И, как вы можете видеть в приведенном ниже примере, он не перетаскивается. когда однажды он упал на цель.

http://jsfiddle.net/kiran/brCX5/31/embedded/result/

И ссылка на сайт http://www.vitsoe.com/en/re/shop/606/sketchtool где вы можете увидеть, что я имею в виду, но в этой ссылке она просто прикреплена, но мне нужно, чтобы она была удалена, т.е. привязать к ближайшему пути, и когда я упаду с тем же изображением, оно должно прикрепиться ниже к существующему и не перекрываться.

И еще раз спасибо за ваш ответ.

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

Answer 1

Я думаю, что это то, что вы хотели: http://jsfiddle.net/maniator/brCX5/33/

$(function() {
    $(".draggable").draggable({
        helper: 'clone',
        snap: '.ui-droppable',
        snapMode: 'outer'
    });

    $(".droppable").droppable({
        accept: '.draggable',
        drop: function(event, ui) {
            var clone = $(ui.draggable).clone();
            $(this).append(clone);
            clone.removeClass('draggable')
            clone.draggable({
                snap: '.ui-droppable',
                snapMode: 'outer'
            });
        }
    });
});

Работает как шарм:-), добро пожаловать