连接jQuery UI嵌套可排序项目

我试图用jQuery UI排序连接多个嵌套项目。连接jQuery UI嵌套可排序项目

代码正确选择可拖放/可拖放项目，但所选项目不能嵌套在别处。

我应该如何允许在所有weblog部分和item-body元素中进行连接（嵌套）？

<!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>

如果您运行代码，您会发现缺少的东西。 Sortable在内部项目上工作正常。但是不可能拖动一个博客标题并将其放在另一个部分下。

出于某种原因，我无法弄清楚我应该用来编写正确的jquery脚本的逻辑。

无论我尝试过什么，我最终都会得到父母孩子的错误。

干杯

来源

2017-10-13 Jeremy

你要找的是不是内置到jQuery用户界面的可排序的功能。

我想建议你看看https://github.com/ilikenwf/nestedSortable，因为它已被选中的答案在jQuery Nested Sortable - Move LI elements within all available UL's。

来源

2017-10-13 11:27:57

我不确定你的意思。你想防止节内容被拖拽和排序吗？ –

对不起，我之前奇怪的评论！同一部分的段落应该留下兄弟姐妹。但目前的代码允许他们彼此的孩子。 – Jeremy

这里的小提琴[链接]（https://jsfiddle.net/62fk5y2m/） – Jeremy

连接jQuery UI嵌套可排序项目

回答

相关问题