Изображение-клон jQuery, но только при перетаскивании из внешнего контейнера - PullRequest
Новая
       33

Изображение-клон jQuery, но только при перетаскивании из внешнего контейнера

0 голосов
/ 19 марта 2012

У меня есть 2 html-элемента,

1. <div class="drag">..example.jpg..</div> содержит изображения, которые можно перетаскивать / клонировать / отбрасывать.
2. <div class="drop-zone"></div> - это элемент div, в который их можно перетаскивать, сохраняя при этом, но не быть клонированным.

Демо : http://jsfiddle.net/rGUma/2/.

Это работает НО, я не хочу, чтобы изображения, которые были сброшены в .drop-zone быть клонированным при перетаскивании.Клонирование должно быть возможно только в том случае, если его вытащили из-за пределов контейнера.(перетащите изображение в поле, затем перетащите это изображение вокруг, и вы увидите, что оно продолжает клонироваться).

Есть ли простой способ сделать это, который я пропускаю, или код выше должен быть полностьюпеределано с использованием другого метода?

Код ссылки: 

$(document).ready(function($) {

    $(".drop-zone").droppable({
        accept: '.drag',
        drop: function(event, ui) {
            $(this).append($(ui.helper).clone());
            $(".drag").addClass("item");
            $(".item").removeClass("ui-draggable");
            $(".item").draggable({
                 containment: '.drop-zone'
            });
        }
    });
    $(".drag").draggable({
        helper: 'clone'
    });

});​

1 Ответ

1 голос
/ 19 марта 2012

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

jQuery(function($) {

    $('.drop-zone').droppable({
        accept: '.drag',
        drop: function(event, ui) {
            var $clone = ui.helper.clone();
            if (!$clone.is('.inside-drop-zone')) {
                $(this).append($clone.addClass('inside-drop-zone').draggable({
                     containment: '.drop-zone'
                }));
            }
        }
    });

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

});
...