Сделайте divs перетаскиваемым и опускаемым для определенных элементов - PullRequest
Новая
       36

Сделайте divs перетаскиваемым и опускаемым для определенных элементов

3 голосов
/ 02 сентября 2011

У меня есть страница с элементами div, которые можно перетаскивать.Каждый div содержит вложенные div, которые также можно перетаскивать.Я хочу иметь возможность перетаскивать вложенные элементы div из div 1 и помещать их в div 2, а также наоборот.Jsfiddle, где я пытаюсь это сделать, находится по этой ссылке http://jsfiddle.net/fWhDn/

Если я переместу ссылку msn.com (перетаскиваемый div) из div 2 в div 1, он не будет добавлен в этот div.Что я должен исправить, чтобы получить правильное поведение, т.е. когда эта ссылка становится частью div 1?

1 Ответ

2 голосов
/ 02 сентября 2011

Чтобы заставить это работать, вы должны добавить перетаскиваемый div к соответствующему бросаемому div. Вы можете сделать это через событие drop внутри drop-init. Я установил его для каждого сбрасываемого div, чтобы получить доступ к $ (this). Также важно сбросить CSS элемента, как будто он не перенесет позицию, которая была у вас при перетаскивании. Вот что я добавил: 

$( "#editdiv .droppable" ).droppable({
    drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.fadeOut(function() {

        $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
    });
$item.appendTo( this );
    }
});
$( "#editdiv_ .droppable" ).droppable({
    drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.fadeOut(function() {

        $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
    });
$item.appendTo( this );
}
});

А вот обновленная скрипка: http://jsfiddle.net/TpbZk/

...