jQuery draggable + sortable avec HTML personnalisé à l’événement de repository?

Consultez cette démo http://jsfiddle.net/yeyene/7fEQs/8/

Vous pouvez personnaliser l’élément déposé à votre guise.

 $(function() { $( "#draggable li" ).draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); $( "#sortable" ).sortable({ revert: true, receive: function(event, ui) { var html = []; $(this).find('li').each(function() { html.push('
'+$(this).html()+'
'); }); $(this).find('li').replaceWith(html.join('')); } }); }); 

Ceci est un exemple très basique mais devrait s’appliquer à plusieurs cas différents. J’ai pris l’exemple jQuery UI Draggable + Sortable et à côté du widget .sortable() j’ai lié le widget .droppable() à l’élément

. Même si ce n’est pas la manière la plus intelligente dans l’événement drop du widget droppable, je vérifie la valeur d’une variable pour identifier l’origine de l’élément déplacé. (Cela vient-il de la liste sortingable ou de l’un de mes objects glissables?) S’il provient de l’un des objects glissables, j’en change le code HTML en ce que je veux. Sinon, cela rest le même (parce que vous venez de réorganiser l’ordre du sortingable)

HTML

 
 
Drag me down
 
 
 
 
 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
  

JS

 $(function () { var origin = 'sortable'; $("#sortable").droppable({ drop: function (event, ui) { if (origin === 'draggable') { ui.draggable.html('Look at this new fancy HTML!'); console.log(ui.draggable); origin = 'sortable'; } } }).sortable({ revert: true }); $("#draggable").draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid", start: function () { origin = 'draggable'; } }); }); 

jsfiddle pour la démonstration

Un exemple assez ennuyeux car le nouveau code HTML est statique. Mais disons que vous avez un assistant personnalisé pour chaque élément glissable et qu’il devrait devenir votre nouveau code HTML. Par exemple, vous avez par exemple stocké des fragments HTML dans un tableau et choisi l’entrée correspondante adaptée à l’index ou quoi que ce soit. Cela ressemblerait en quelque sorte à ça:

 var helpersArr = ['', '', '']; var helper; //draggable helper: function () { helper = helpersArr[$(this).index()]; return helper; } //dropppable drop function ui.draggable.html(helper); 

jsfiddle pour le deuxième exemple

Bien sûr, vous pouvez également obtenir le même résultat en évitant la variable d’assistance et en utilisant plutôt ui.helper mais je ne savais pas comment obtenir la partie HTML de celle-ci. Si cela ne fonctionne pas comme vous en avez besoin, il suffit de m’en informer. Globalement, je pense que vous pouvez utiliser mes exemples comme sharepoint départ pour différents objectives concernant le changement du code HTML de l’élément supprimé.

J’ai eu un problème similaire qui nécessitait un résultat beaucoup plus élaboré. Mon système glissait depuis un div à gauche qui contenait d’autres div avec des noms d’élément de formulaire et des identifiants, qui tombaient dans un div sortingable à droite qui devait devenir un formulaire Web. Parce que j’avais besoin de la div de droite pour ressembler de près au contenu d’un formulaire sans balise supplémentaire, il était hors de question d’utiliser une liste non ordonnée à moins que je ne veuille faire un tas de “nettoyage” dans la firebase database. Non merci. Dans mon exemple, lorsque je glisse dans la liste de gauche, je dois utiliser l’identifiant de l’élément glissé pour rechercher un certain nombre d’éléments via ajax, puis placer un libellé, un élément de formulaire et une validation dans la liste de la liste. laissé sur la base des résultats de cette ajax. Par souci de clarté, j’ai supprimé le ajax de mon exemple.

Donc, en gros, vous prenez deux divs côte à côte, glissant et sortingable avec une connexion par liste. La clé est qu’il existe des fonctions de rappel dans Sortable que vous devez utiliser. Le rappel “Receive” ne sera déclenché que lorsqu’un nouvel élément est ajouté à la liste pouvant être sortingée. Ceci est important, car vous devez vous différencier pour que votre changement ne se produise pas aussi bien. Cependant, vous ne pouvez pas utiliser uniquement “receive”, car si vous essayez de manipuler le code HTML dans ce rappel, vous affecterez la liste à partir de laquelle vous faites glisser le curseur, pas la liste à laquelle vous faites glisser le curseur. Pour savoir s’il s’agit d’un ajout de liste ou d’un glisser-déposer, j’ai défini la variable “newlement” dans $ .data sur 1 si c’est un ajout de liste, que j’ai ensuite archivée dans le rappel de mise à jour pour voir si je devais effectuer le html déplacé. ou pas. Dans mon cas, je ne veux rien faire à un élément traîné.

Donc, le HTML:

 
 
First Name
 
Last Name
 
 
  

Et le jQuery:

 $( ".master_list div" ).draggable({ connectToSortable: "#webform_container", helper: "clone", revert: "invalid" }); $( "#webform_container" ).sortable({ revert: true, cursor: 'pointer', placeholder: "placeholderdiv", connectWith: '.master_list', start: function() { /* Clear the value of newelement at start */ $(this).data('newelement', 0); }, receive: function(event, ui) { /* Get id from function and pass to the update to do stuff with */ $(this).data('id', ui.item[0].id); /* Set value of newelement to 1 only when new element is added to list */ $(this).data('newelement', 1); }, update: function(event, ui) { /* If newelement ==1, this is a new element to the list, transform it */ if ($(this).data('newelement') == 1) { var fieldname = ui.item.text(); ui.item.html('your new html here'); } } 

});

Consultez la documentation sur sortable. Vous pouvez utiliser l’élément ui pour changer le code HTML de l’object déposé

http://jqueryui.com/demos/sortable/#event-update

vous pouvez également voir des exemples de listes connectées ici et des événements déclenchés

http://jqueryui.com/demos/sortable/#connect-lists

L’événement de mise à jour est l’endroit où vous souhaitez modifier le code HTML de l’élément.