Клон исчезает, а исходный div остается, как сделать наоборот?

Question

[Alexey]

Я имею такую структуру:

<div class="anotherDiv"></div>
<div class="group">
        <div class="clusters-group-container popup-panel-bg">
          <div class="group-container">BLOCK</div>
        </div>
</div>

И такой код Javascript + Javascript UI:

$(".group").draggable({
            containment: 'document',
            zIndex: 9999,
            helper: 'clone',
            appendTo: '.anotherDiv'
});

Мне необзодимо:
1) Блок должен перемещаться (drag&drop)
2) При нажатии на блок создается клон. Это необходимо, иначе блок будет идти под другие DIV-ы.
3) При перемещении клона, оригинальный div должен исчезнуть, то есть кликнул мышей на Блоке, появился клон, а оригинальный div исчез.
4) После того, как клон переместили и отпустили мышь, он не должен исчезнуть! Т.е. фактически должно быть так же, как если бы это было:

$(".group").draggable();
Но только используя клон.

Вот рабочий пример: jsfiddle.net/33u3xysa

Спасибо большое за помощь!

Answer 1

[Никита Гущин]

Вы и сами почти решили задачу :)

Адекватный вариант (jsfiddle):

$(function() {      
    $(".group").draggable({
                containment: 'document',
                zIndex: 9999,
                helper: 'clone',
                appendTo: '.anotherDiv'
    }).on("drag",function(e){
        // Когда начинаем перемещать - удаляем оригинал
        $(this).remove();
    });
});

Еще есть неадекватный вариант (jsfiddle) если хотите вручную все это проделывать (или показывать другой элемент и т.д.):

$(function() {
    // При нажатии кнопки мышки на элементе
    $(".group").mousedown(function(e){
        var $this = $(this);        
        // Клонируем оригинал
        var clonedNode = $this.clone(); 
        // Устанавливаем координаты и абсолютное позиционирование относительно body
        // Чтобы вставить новый блок в то же место где был оригинал
        clonedNode.css($this.offset());         
        clonedNode.css({position:'absolute'}); 
        // Делаем элемент перетаскиваемым
        clonedNode.draggable({
                containment: 'document',
                zIndex: 9999,
                appendTo: '.anotherDiv'
        });
        // Добавляем клон на страницу (в body), а оригинал - удаляем
        $('body').append(clonedNode); 
        $this.remove();
        // Говорим клону, что на него пользователь нажал мышкой (начал перетаскивать)
        clonedNode.trigger(e);
    });
});

UPD1:
Если Вам нужно, чтобы блок добавлялся в контейнер в который вы его бросаете - настройте droppable. Я покопался - написал более полный пример (jsfiddle)

$(function() {    
    // Для всех элементов инициализируем draggable
    $(".group").map(initDraggable);
    // Инициализируем droppable
    $(".anotherDiv").droppable({
        accept:  '.group',
        drop:  function(event, ui) {
            // Если мы успешно бросаем элемент - клонируем его
            // Не забудем удалить класс hiddenGroup - т.к. оригинал перетаскиваемого элемента был спрятан
            $(this).append($(ui.draggable).clone().removeClass('hiddenGroup'));
            // Удалим оригинал
            $(ui.draggable).remove();
        }
    });    
    
    function initDraggable(){        
        // Сохраняем элемент
        var $el = $(this);        
        $el.draggable({
                containment: 'document',
                zIndex: 9999,
                helper: 'clone',
                appendTo: '.anotherDiv',
                revert: function(isValidDrop){
                    // Эта функция вызывается, когда элемент закончили перетаскивать
                    // Параметр isValidDrop - истина, если элемент успешно перетащен (его бросили в контейнер anotherDiv)
                    if(!isValidDrop){                                   
                        // Если же элемент был брошен не там, то сделаем оригинал снова видимым 
                        // (клон пропадет, если мы вернем false см. ниже)
                        $el.removeClass('hiddenGroup');                        
                    }
                    // По-хорошему надо возвращать !isValidDrop, но тогда при отмене перетаскивания
                    // будет анимация (блок полетит обратно на свое место) 
                    // и одновременно с этим будет показан оригинал (из условия выше) - выглядит некрасиво
                    return false;//!isValidDrop;
                }
        }).on("drag",function(e){
            // При начале перетаскивания - прячем оригинальный блок
            $el.addClass('hiddenGroup');
        });
    }
});

UPD2:
Последний вариант, все как Вы просили (надеюсь) (jsfiddle):

$(function() {      
    $(".group").map(initDraggable);
    $(".anotherDiv").droppable({
        accept:  '.group',
        drop:  function(event, ui) {
            // Добавим position: absolute           
            // И клонируем наш хэлпер, а не оригинал
            var $cloned = $(ui.helper).clone().addClass('droppedGroup'); 
            
            $(this).append($cloned);     
            initDraggable.apply($cloned);
            $(ui.draggable).remove();
        }
    });    
    
    function initDraggable(){        
        var $el = $(this);
        
        $el.draggable({
            containment: 'document',
            zIndex: 9999,
            helper: 'clone',
            appendTo: '.anotherDiv',
            start:  function(event, ui){ 
                $el.addClass('hiddenGroup');
            },
            revert: function(isValidDrop){
                if(!isValidDrop){                  
                    $el.removeClass('hiddenGroup');                        
                }
                return false;//!isValidDrop;
            }
        });
    }
});

Comments

[Alexey]

Большое спасибо за такой комплексный ответ.
Адекватный вариант - не подходит, поскольку при перемещении блока, - он исчезает, а мне необходимо чтобы он был и draggable.
Upd1. Тоже не подходит поскольку он добавляет все строго в одну колонку, а мне необходимо чтобы он был "плавающим", куда захотел, туда и поставил, что-то вроде меток.
Неадекват, как вариант приемлем, сейчас его тестирую.

[Никита Гущин]

azovl: попробуйте из последнего варианта настроить функцию

drop: function(event, ui) {}

И создавать блок на месте, где бросили предыдущий

[Alexey]

iNikNik Спасибо огромное! Сильно помогли, иногда так нужны такие советы и решения...

[Влад]

iNikNik: вместо .on("drag",function(e){}) лучше ивент start у draggable использовать

[Никита Гущин]

Влад: спасибо, поправил)

[Никита Гущин]

azovl: добавил в ответ еще вариант

[Никита Гущин]

azovl: не за что))) рад помочь)