Je travaille sur un glisser & déposer la page où vous pouvez faire glisser des éléments d'une liste dans divers conteneurs droppable. Cela fonctionne parfaitement. Ce que j'essaie maintenant de réaliser, c'est alors de pouvoir les faire glisser d'un conteneur à un autre (ou de les réorganiser dans un conteneur). Mais je n'arrive pas à faire ça.jQuery glisser-déposer et faire glisser à nouveau
La liste ressemble à une succession de cases colorées avec des titres (chacune a un nom de classe de '.item'). Lorsque vous faites glisser de la liste il clone, de sorte que la liste reste la même (c'est à dire que les blocs ne sont pas supprimés).
Il existe deux conteneurs (dans cet exemple), avec les noms de classe 'dragrow1' et 'dragrow2'. Selon la ligne dans laquelle vous faites glisser votre boîte, le bloc changera d'apparence. Cela fonctionne comme il se doit. Le problème est de faire glisser à nouveau ces boîtes, soit à l'intérieur de son propre conteneur ou d'un autre, et sans le cloner lui-même (il doit se déplacer). En passant, le nom de la classe passe de '.item' à '.box' après avoir été déposé pour des raisons de style. Ce qui est bien, c'est que vous faites glisser une boîte colorée dans un conteneur, à cause du style css appliqué, chaque boîte flotte l'une à côté de l'autre, de sorte qu'elles se trouvent côte à côte dans le coin supérieur gauche.
Mon code jquery donc ressemble beaucoup à ceci:
$(document).ready(function(){
$(".items").draggable({helper: 'clone'});
$(".dragrow1").droppable({
accept: ".items, .box",
hoverClass: 'dragrowhover',
tolerance: 'pointer',
drop: function(ev, ui) {
var dropElemId = ui.draggable.attr("id");
var dropElemTitle = ui.draggable.attr("title");
$(this).append('<div class="box" id="'+dropElemId+'row1">'+dropElemTitle+' - some extra box content here</div>');
$('div.box a').click(function(){$('#'+dropElemId+'row1').remove()});
}
});
$(".dragrow2").droppable({
accept: ".items, .box",
hoverClass: 'dragrowhover',
tolerance: 'pointer',
drop: function(ev, ui) {
var dropElemId = ui.draggable.attr("id");
var dropElemTitle = ui.draggable.attr("title");
$(this).append('<div class="box" id="'+dropElemId+'row2">'+dropElemTitle+' - different content here</div>');
$('div.box a').click(function(){$('#'+dropElemId+'row2').remove()});
}
});
});
Et un exemple du code de conteneur ressemble à ceci:
<div class="dragbox-content" style="display:block" >
<div class="dragrow1"> </div>
<div class="dragrow2"> </div>
</div>
Quelqu'un peut-il me donner des pointeurs?
Merci,
Ali.
Le message a semblé dépouiller mon code HTML. Ce sont juste des divs vides de base avec les noms de classe de 'dragrow1' & 'dragrow2') – WastedSpace