Restreindre conteneur / parent pour Triable

OK, je suis de nouveau en train de jouer avec le plugin Sortable de @ RubaXa (et j’espère qu’il est quelque part ici, car celui-ci est simplement assez compliqué …)

Quelques découvertes (il m’a fallu un certain temps pour bien comprendre le mécanisme, mais je pense avoir tout à fait raison)

---

Cas 1

si nous définissons une div avec un contenu de même type, elle est immédiatement sortingable. Par exemple:

HTML

• Comment changer le curseur en fonction de la position de la souris?
• Jquery Open Accordion basé sur le hachage d’ancrage d’URL
• effet de survol jQuery sur la table
• Espace manquant lorsque je change la couleur d’arrière-plan de la cellule dans SlickGrid?
• Caractères spéciaux de type Textarea

 
 
Item 1
 
Item 2
  

JavaScript

 new Sortable(document.getElementById("myContainer")); 

Démo: http://jsfiddle.net/b02wfe4o/

---

Cas 2

si nous définissons une div avec des contenus de types différents (par exemple, h2 s et h3 s, nous devons également spécifier la classe draggable . Par exemple:

HTML

 
 
Item 1
 
Item 2
  

JavaScript

 new Sortable(document.getElementById("myContainer"), { draggable: '.myDraggable' }); 

Démo: http://jsfiddle.net/qemz00eq/1/

---

Cas 3

si nous définissons 2 (ou plus) div s côte à côte, cela fonctionne à peu près de la même manière. Par exemple:

HTML

 
 
Item 1.1
 
Item 1.2
 
 
 
Item 2.1
 
Item 2.2
  

JavaScript

 new Sortable(document.getElementById("myContainer1"), { draggable: '.myDraggable' }); new Sortable(document.getElementById("myContainer2"), { draggable: '.myDraggable' }); 

Démo: http://jsfiddle.net/qeyxxj4y/

---

LE PROBLÈME

Maintenant, que faire si sortable A est un enfant de sortable B?

HTML

 
 
Item 1.1
 
Item 1.2
 
 
Item 2.1
 
Item 2.2
 
  

JavaScript

 new Sortable(document.getElementById("myContainer1"), { draggable: '.myDraggable' }); new Sortable(document.getElementById("myContainer2"), { draggable: '.myDraggable' }); 

Démo: http://jsfiddle.net/j7fesLkp/8/

---

Eh bien, maintenant cela ne fonctionne pas comme prévu:

• myContainer2 éléments myContainer2 peuvent être déplacés / sortingés parfaitement dans leur conteneur. Ce qui va bien.
• myContainer1 éléments myContainer1 peuvent également être déplacés dans myContainer2 . Je veux dire prendre l’élément 1.1 et le placer à l’intérieur de myContainer2 , ce qui n’était pas le cas lorsque les deux conteneurs étaient côte à côte.

Alors, comment pouvons-nous désactiver ce comportement? Je veux dire: les articles de chaque conteneur doivent se déplacer UNIQUEMENT dans ce conteneur et non dans ses enfants.

Comment cela peut-il être fait?

• StickBar NavBar onScroll?
• Les fadeIn et fadeOut de jQuery peuvent-ils être utilisés pour utiliser des transitions CSS?
• jQuery ui autocomplete – .ui-autocomplete-loading
• Masquer le contenu de défilement sous l’en-tête transparent fixe, faire défiler l’arrière-plan
• Comment donner un remplissage dégradé à un polygone dans un svg?