連接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嵌套可排序項目

回答

相關問題