jQuery draggable + droppable: как привязать брошенный элемент к добавленному элементу

Question

У меня экран разделен на два DIV с. Слева DIV у меня есть несколько пикселей 50x50 DIV с, справа DIV у меня пустая сетка, сделанная из 80x80 LI s. DIV слева перетаскиваемы, и после падения на LI они должны привязаться к центру этого LI.

Звучит просто, верно? Я просто не знаю, как это сделать. Я попытался изменить свойства CSS top и left отброшенных DIV, чтобы они соответствовали свойствам LI, в которые они вставлены, но свойства left и top относительно левой DIV.

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

Редактировать: Я использую jQuery UI 1.7.2 с jQuery 1.3.2.

Редактировать 2: Для тех, кто еще имеет эту проблему, вот как я ее исправил:

Я использовал решение Кейта удалить перетаскиваемый элемент и поместить его в опущенный элемент в обратном вызове drop подключаемого модуля:

function gallerySnap(droppedOn, droppedElement)
{
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>' );
    $(droppedElement).remove();
}

Мне не нужно, чтобы перетаскиваемый элемент снова был перетаскиваемым, но если вы это сделаете, просто привязайте перетаскиваемый элемент к нему снова.

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

Я поиграл с опциями привязки, чтобы они хорошо выглядели при перетаскивании, поэтому спасибо karim79 за это предложение.

Я, вероятно, не выиграю призы Awesome Code с этим, поэтому, если вы видите возможности для улучшения, пожалуйста, поделитесь!

Answer 1

Я обнаружил, что метод Кейта работает для меня. Поскольку его ответ не включает пример реализации, я опубликую свой:

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
    }
});

или, более кратко:

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
    }
});

Answer 2

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

Answer 3

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

drop: function(event, ui) {
   $(ui.draggable).css('top', $(this).position().top);
   $(ui.draggable).css('left', $(this).position().left);
}

Answer 4

$("form li").draggable({snap:'.ui-droppable', snapMode:'inner', revert:true});
$('.drop').droppable({drop:function(ev, ui)
                           {$(ui.draggable).appendTo($(this))
                                           .css({position:'static', left:'0px', top:'0px'})
                                           .draggable('option', 'disabled', false)
                                           .css({position:'relative'});
                           }
                     }
                    );

Answer 5

Я обнаружил, что когда вы выполняете перетаскивание, пользовательский интерфейс jQuery добавляет встроенный элемент, чтобы указать, куда вы его уронили. Ниже приведен пример кода, который я использовал, чтобы привязать его к месту

$('.droppable').droppable({ drop: function(ev, ui) { 
    //Get Details of dragged and dropped
    var draggedclass = ui.draggable.attr('class'),
        droppedclass = 'class' + $(this).attr('name').toLowerCase();

    //update the classes so that it looks od.       
    ui.draggable.removeClass(draggedclass).addClass(droppedclass);  
    ui.draggable.removeAttr('style');
});

Answer 6

на основе кода Барри, что если мы захотим добавить опцию с кнопкой «x», чтобы элемент был снова отсоединен от нового родителя и снова присоединен к исходному?

Я думал, что вот так, но, похоже, не работает .. сделать какую-то переменную, которая содержит начальное состояние

var flag;
$('.draggable-div').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
        $(this).find('.undo').show();
    flag=$(this).parent();
    }
});


$('.draggable-div').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
$($div).detach().appendTo(flag);
 }

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

Answer 7

Если div слева находятся в li справа (что можно подтвердить с помощью Firebug), и если li все в ul (как они должны быть), попробуйте одно или оба из следующих:

ul#right_div {
  text-align: center;
}

ul#right_div li {
  text-align: center;
}