Connexion des éléments triés imbriqués de l'interface utilisateur jQuery

J'essaie de connecter plusieurs éléments imbriqués à l'aide du triable de l'interface utilisateur de jQuery.Connexion des éléments triés imbriqués de l'interface utilisateur jQuery

Le code sélectionne correctement les éléments déplaçables/déposés, mais les éléments sélectionnés ne peuvent pas être imbriqués ailleurs.

Comment autoriser la connexion (imbrication) dans toutes les sections de weblog et les éléments de corps d'élément?

<!DOCTYPE html> 
<html html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <title>Sortable with jQuery test</title> 

<style>#myToolTip { 
display: none; 
} 
.Mainheading { 
    font-size: 2em; 
    color: red; 
} 

.weblog { 
    width: 65%; 
    padding: 5px; 
    margin: 10px; 
    font-family: monospace; 
} 

.weblog-section { 
    background-color: #EEE; 
    margin-bottom: 10px; 
} 

.item-body { 
    /*background-color: #EEE; */ 
} 

div { 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border: 1px #CCC dashed; 
    margin: 3px; 
    padding: 5px 5px; 
} 

OL { 
    counter-reset: item; 
    margin: 1px; 
    padding: 5px; 
    font-weight: bolder; 
} 

LI { 
    display: block; 
    font-size: 1.1em; 
    padding: 5px 10px; 
    background-color: #DDD; 
    margin: 1px; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    font-family: Tahoma; 
    } 
LI:before { content: counters(item, ".") " "; counter-increment: item } 

p { 
    padding: 0px 5px; 
    text-align:justify; 
} 

.toolbox, .toolbar:link{ 
    color:white; 
    font-size: smaller; 
    font-family: monospace; 
    text-decoration:none; 
} 

#sortable { } 
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } 
html>body #sortable li { height: 1.5em; line-height: 1.2em; } 
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }</style> 
    </head> 
<body> 

<ol> 
    <div class="weblog"> 
     <div class="weblog-section"> 
      <li>Some blog title</li> 
      <div class="item-body"> 
       <p>Some blog text.</p> 
      </div> 
     </div> 

     <div class="weblog-section"> 
      <li>Some blog title</li> 
      <div class="item-body"> 
       <p>Some blog text.</p> 
      </div> 
     </div> 

     <div class="weblog-section"> 
      <li>Some blog title</li> 
      <div class="item-body"> 
       <!--<p></p>--> 

       <ol> 
        <div class="weblog-section"> 
         <li>Some blog title</li> 
         <div class="item-body"> 
          <p>Some blog text.</p> 
         </div> 
        </div> 
       </ol> 

      </div> 
     </div> 

     <div class="weblog-section"> 
      <li>Some blog title</li> 
      <div class="item-body"> 
       <p>Some blog text.</p> 
      </div> 
     </div> 
    </div> 
</ol> 


     <script type="text/javascript" src='scripts/jquery-3.2.1.js'></script> 
     <script type="text/javascript" src="scripts/jquery-ui.js"></script> 

     <script> 

      $(function() { 

       $(".weblog-section").sortable({ 
        connectWith: ".weblog-section", 
        items: ".item-body" 
       }); 
       $(".weblog-section").disableSelection(); 

       $(".weblog").sortable({ 
        connectWith: " > .item-body", 
        items: "> .weblog-section", 
       }); 

       $(".weblog").disableSelection(); 
      });    

     </script> 

    </body> 
</html>

Si vous exécutez le code, vous reconnaîtrez ce qui manque. Sortable fonctionne correctement sur les éléments internes. Mais il n'est pas possible de faire glisser un titre de blog et de le placer dans une autre section.

Pour une raison quelconque, je ne pouvais pas comprendre la logique que je devrais utiliser pour écrire le bon script jquery. Quoi que j'aie essayé, j'ai fini par avoir des erreurs parent-enfant.

Vive

Source

2017-10-13 Jeremy

La fonctionnalité que vous recherchez ne se construit pas en sortable jQuery UI.

Je voudrais suggérer pour vous de regarder https://github.com/ilikenwf/nestedSortable, comme il a été la réponse choisie dans jQuery Nested Sortable - Move LI elements within all available UL's.

Source

2017-10-13 11:27:57

Je ne suis pas sûr de ce que vous voulez dire. Voulez-vous empêcher le contenu de la section d'être déplacé et trié? –

Désolé pour mon commentaire bizarre avant! Les paragraphes de la même section devraient rester frères et soeurs. Mais le code permet actuellement de faire d'eux les enfants les uns des autres. – Jeremy

est ici le violon [lien] (https://jsfiddle.net/62fk5y2m/) – Jeremy

Connexion des éléments triés imbriqués de l'interface utilisateur jQuery

Répondre

Questions connexes