Glisser-déposer avec jquery, glisser-déposer et div drop

Question

Je veux implémenter une solution avec jQuery où un bouton peut être déplacé vers un certain élément div. Quand il est tombé dans cette div, il aurait dû personnaliser html.

J'ai trouvé un exemple qui est sur jsfiddle, mais malheureux SO ne fournit pas de liaison à jsfiddle. Je coller tout le code ici:

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(); 

Je veux quelque chose de similaire à ce qui précède, mais je veux changer la image dans un certain bouton et plutôt l'élément de l'interface utilisateur, peut-il être changé en div normal?

Quelqu'un pourrait-il jouer avec ce violon et me fournir une simple solution glisser-déposer?

Merci d'avance.

Answer 1

Je pense, j'ai trouvé la solution moi-même en jouant avec le code ci-dessus. Je faisais mal avec le bouton, parce que le bouton a déjà cliqué sur l'événement mappé, c'est pourquoi quand j'essayais de faire glisser le bouton, il ne fonctionnait pas avec l'événement de glisser. J'ai juste essayé d'ajouter l'élément div, qui montre comme bouton (style avec css) et cela a fonctionné comme je le voulais.

La seule chose que je devais changer est dans le code 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> 

Voici la solution finale que je recherchais: http://jsfiddle.net/Y7RmR/77/