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

Question

Я хотел бы иметь возможность перетаскивать изображение в один из двух контейнеров (контейнер 1 и контейнер 2).Оттуда, в зависимости от того, в какой контейнер было добавлено изображение, я бы хотел обновить этот контейнер с помощью вызова базы данных (или просто обновить строку в одной из моих таблиц).

Я бы хотел использовать http://jqueryui.com/demos/droppable/ для достижения этой цели, но я не уверен, как обработать запрос и как заставить каждый контейнер прослушивать обработчик событий (удалениеimage).

Я нарисовал очень плохую диаграмму ниже, чтобы объяснить, что я имею в виду:

Answer 1

Демо-версия показывает, как именно это сделать.

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});

Моя собственная действительно базовая демонстрация & # x2192; ( обновление )