JQuery draggable + droppable: как привязать упавший элемент к включенному элементу

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

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

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

Изменить: Я использую jQuery UI 1.7.2 с jQuery 1.3.2.

Изменить 2: Для тех, у кого еще есть эта проблема, вот как я ее исправил:

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

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

Я не удаляю элемент, который нужно перетащить, но если вы это сделаете, просто перетащите его обратно.

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

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

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

Ответ 1

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

Ответ 2

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

$('.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);
    }
});

Ответ 3

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

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

Ответ 4

Я обнаружил, что когда вы выполняете перетаскивание, пользовательский интерфейс 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');
});

Ответ 5

$("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'});
                           }
                     }
                    );

Ответ 6

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

ul#right_div {
  text-align: center;
}

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

Ответ 7

на основе кода Барри, что, если мы хотим добавить опцию с помощью кнопки "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 определенно ошибочно, но я не знаю, можете ли вы получить концепцию... просто возможность отменить все, что вы сбросили, в исходное состояние.