jquery перетаскивание - PullRequest
Новая
       134

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

1 голос
/ 25 марта 2011

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

    $(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, и если в конце нет места, он должен проверить, есть ли пробел сверху или снизу, и добавить его к изображению, в противном случае он должен вернуться. Можете ли вы проверить это.

1 Ответ

0 голосов
/ 25 марта 2011

Я думаю, это то, что вы хотели: 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'
            });
        }
    });
});

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

...