Как получить значения из нескольких JQuery перетаскивания

Question

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

Итак, чего я хочу достичь, это то, что вы видите здесь: http://d.pr/h4N5. (извините, я пока не могу публиковать изображения, потому что яЯ новичок здесь) Одна из цветных коробок должна быть перетащена в одну из серых.Вот как далеко я дошел, кодирую это.

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

Например: если я уроню розовую коробку на серый ящик с цифрой 5. Мне нужны значения: 5 и p.

Надеюсь, вы понимаете мою проблему.

Мне также было интересно, можно ли уронить две цветные коробки на одну и ту же серую коробку.

Многовопросы, но я действительно надеюсь, что кто-то может мне помочь!Заранее спасибо!

Answer 1

Ознакомьтесь с документацией по API jQuery UI:

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/droppable/

Тогда вы можете использовать что-то вроде следующего, если вы зададите класс серых блоков grey и класс цветовых блоков color, передав их содержимое в виде данных обработчику PHP с помощью запроса AJAX:

$('.color').draggable({
    revert: true
});

$('.grey').droppable({
    drop: function(event, ui) {
        var $drag = $(ui.draggable),
            $drop = $(this),
            data = {};

        data.drag = $drag.text();
        data.drop = $drop.text();

        $.ajax({
            url: "droppedToDatabase.php",
            type: "POST",
            data: data,
            success: function(response){
                // do whatever
            }
        }
    },
    tolerance: 'touch'
});

Вот пример пользовательского интерфейса: http://jsfiddle.net/G2rZV/

Answer 2

Сделайте это в событии сбрасывания ваших droppables:

$('.drop').droppable({
   drop: function(event, ui){
      var dropValue = $(this).text();
      var dragValue = ui.draggable.text();
   }
});

Внутри события drop, $(this) относится к объекту jQuery, для которого что-то было удалено, а ui.draggable всегда дает вамjQuery объект, который был удален.