Перетаскивание с jquery, перетаскивание кнопки и div div

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/