Перетащите с помощью jquery, кнопки перетаскивания и div drop

Question

Я хочу реализовать решение с помощью jQuery, где кнопку можно перетащить на определенный элемент div. Когда он попадает в этот div, он должен настроить HTML.

Я нашел один пример, который находится на jsfiddle, но, к сожалению, SO не предоставляет ссылки на jsfiddle. Я вставляю весь код здесь:

HTML

<ul id="left-pane">
   <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li>
   <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li>
   <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li>
</ul>

<ul id="right-pane">
</ul>

CSS

#left-pane
{
    border: 1px solid black;
    min-width: 100px;
    min-height: 100px;
}

#right-pane
{
    border: 1px solid black;
    min-width: 100px;
    min-height: 100px;
}

JavaScript / JQuery

$("#left-pane li").draggable({
    containment: '#gbox',
    cursor: 'move',
    helper: 'clone',
    scroll: false,
    connectToSortable: '#right-pane',
    appendTo: '#right-pane',
    start: function () {},
    stop: function (event, ui) {}
}).mousedown(function () {});

$("#right-pane").sortable({
    sort: function () {},
    placeholder: 'ui-state-highlight',
    receive: function () {},
    update: function (event, ui) {}
});

$("#right-pane li").live('dblclick', function () {
    $(this).remove();
})

$("#right-pane").droppable({
    accept: "#left-pane li",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        if ($(ui.draggable).find('.single-item').length == 0)
        {
            $(ui.draggable).append("<div class='single-item'><input type='text' class='item-title' /><br /><textarea class='item-text'></textarea></div>");
        }
    }
});

$("#left-pane").droppable({
    accept: "#right-pane li",
    drop: function (event, ui) {}
});

$("ul, li").disableSelection();

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

Может ли кто-нибудь поиграть с этой скрипкой и предложить мне простое решение для перетаскивания?

Заранее спасибо.

Answer 1

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

Единственное, что мне нужно было изменить, это HTML-код:

<ul id="left-pane">
   <li><div align="center" style="width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;">Drag Me</div>
</ul>

<ul id="right-pane">
</ul>

Вот окончательное решение, которое я искал: http://jsfiddle.net/Y7RmR/77/