Comment puis-je laisser les gens glisser et déposer des LI à un endroit spécifique dans une liste? (problèmes console.log)

Question

Je suis confronté à deux problèmes, dont l'un est un objectif et l'un d'entre eux est l'échec d'obtenir des informations à partir des appels console.log().

Let regard à l'objectif premier:

J'ai un jsFiddle à https://jsfiddle.net/L7sbhzzj/ pour un projet sur lequel je travaille. Le code je travaille est:

jQuery('.collection').droppable(
    { 
    'accept': '.collection > li', 
    'drop': function(e, ui) 
     { 
     console.log('Reached here!'); 
     console.log(this); 
     jQuery('#selection').append(ui.draggable); 
     } 
    }); 

Essentiellement, je veux que les gens soient en mesure de faire glisser et déposer des éléments à une position spécifique sur une liste. Ainsi, dans le JSfiddle, vous pouvez faire glisser "Fiction" vers la droite, mais si vous faites cela et que vous faites glisser sur "Nonfiction", "Nonfiction" n'est ajouté qu'à la fin; vous ne pouvez pas ensuite faire glisser "Nonfiction" pour être au dessus et avant "Fiction". J'aimerais éviter de réinventer la roue à ce sujet; J'imagine qu'il y a un modèle standard comme "Mettre le LI en lâché immédiatement avant le LI d'UL cible qui a la distance la plus basse vers le haut de la page mais est toujours égale ou supérieure à la distance du LI au dessus de la page."

Maintenant, pour revenir à l'autre problème que je suis confronté: soit jQuery('#selection').append(ui.draggable); fonctionne ou quelque chose d'autre fait un travail équivalent, mais aucun de mes console.log() semblent être signalés. J'ai quelques idées pour implémenter quelque chose, mais ce serait bien d'introspecter et d'obtenir la sortie de diagnostic de console.log() pendant que je travaille sur des choses. Le 'drop' prend-il effet? Est-ce que ça marche d'une autre façon? Comment puis-je obtenir des choses comme l'élément auquel l'objet a été déposé?

--EDIT--

J'ai réalisé que je l'avais demandé un côté de ce que je veux. J'aimerais que les gens puissent emmener l'article XYZ d'un contenant à un autre, puis revenir s'ils changent d'avis. La solution de Snowmonkey a fonctionné magnifiquement pour que la bonne liste soit triable. Cependant, l'adaptation suivante a échoué, peut-être parce que j'ai appelé deux améliorations incompatibles:

jQuery(function() 
{ 
jQuery('#selection').sortable(
    { 
    }); 
jQuery('li', jQuery('#source')).draggable(
    { 
    'connectToSortable': '#selection', 
    'cancel': 'a.ui-icon', 
    'revert': 'invalid', 
    'containment': 'document', 
    'cursor': 'move' 
    }); 
jQuery('#source').sortable(
    { 
    }); 
jQuery('li', jQuery('#selection')).draggable(
    { 
    'connectToSortable': '#selection', 
    'cancel': 'a.ui-icon', 
    'revert': 'invalid', 
    'containment': 'document', 
    'cursor': 'move' 
    }); 

Comment puis-je obtenir une variation complète des deux côtés de la réponse de Snowmonkey?

Merci,

Answer 1

Donc, vous voulez connecter un draggable à un sortable? Voici un moyen simple. Débarrassez-vous complètement du droppable et ajoutez simplement la règle 'connectToSortable' à votre draggable. Ainsi, #selection reste triable et #source reste un draggable, qui peut tomber dans n'importe quelle position sur #source.

jQuery(function() { 
 

 
    $(".collection").sortable({ 
 
    }); 
 
    
 
    jQuery('li', jQuery('.collection')).draggable({ 
 
    'connectToSortable': '.collection', 
 
    'cancel': 'a.ui-icon', 
 
    'revert': 'invalid', 
 
    'containment': 'document', 
 
    'cursor': 'move' 
 
    }); 
 
});

body { 
 
    background-color: #ccc; 
 
    font-family: Verdana, Georgia; 
 
} 
 

 
div.main { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 440px; 
 
} 
 

 
div.table { 
 
    display: table; 
 
    width: 440px; 
 
} 
 

 
div.td { 
 
    display: table-cell; 
 
    width: 50%; 
 
} 
 

 
div.tr { 
 
    display: table-row; 
 
} 
 

 
ul.collection { 
 
    background-color: white; 
 
    list-style: none; 
 
    padding-left: 0; 
 
    min-height: 100px; 
 
    padding-left: 0; 
 
    width: 200px; 
 
} 
 

 
ul.collection > li {} 
 

 
ul#selection { 
 
    float: right; 
 
} 
 

 
ul#source { 
 
    float: left; 
 
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="main"> 
 
    <div class="table"> 
 
    <div class="tr"> 
 
     <div class="td"> 
 
     <ul id="source" class="collection"> 
 
      <li>Everything</li> 
 
      <li>Nonfiction</li> 
 
      <li>Fiction</li> 
 
      <li>Poetry</li> 
 
     </ul> 
 
     </div> 
 
     <div class="td"> 
 
     <ul id="selection" class="collection"> 
 
      <li>Empty</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

donc je mis à jour le poste ci-dessus pour le faire fonctionner dans les deux sens. Plutôt que d'utiliser l'identifiant pour les deux éléments, j'ai utilisé la classe qu'ils ont en commun. Les deux éléments .collection sont triables et les deux éléments connectToSortable .collection. J'espère que cela aide!

Answer 2

Vous pouvez réaliser ce que vous voulez juste en utilisant jquery ui sortable. Si vous souhaitez être averti à chaque fois qu'un élément est ajouté à la sélection, vous pouvez écouter l'événement de réception.

jQuery(function() 
{ 
jQuery("#source").sortable({ 
    connectWith: "#selection", 
}).disableSelection(); 

jQuery("#selection").sortable({ 
    receive: function() { 
    console.log("changed"); 
    } 
}) 
});