0

私は2つのリストを持っており、それぞれが一意のIDを持っています。<div>親親リストのメインリストが、外部セクション全体を、それ自体<li> <div>のリストがすでに含まれているセクションにドロップするのを防ぐにはどうすればよいのでしょうか<ul> <li>。さらに、プレースホルダーもそこに表示されます。メインのグローバルリストにアイテムがある別のリストの上に移動しても、最初のリストに属するアイテムを強制的にそこにとどまらせる方法があるかどうか疑問に思っています。

前もって感謝します。

編集：いくつかのコード：

<ul id="main">
      <li>
           <div id="content"><p>Lorem ipsum...</p></div>
      </li>
      <li>
        <div id="Section1">
            <ul id="section-list">
                 <li><div id="item1"><h2>Hello World</h2><li>
                 <li><div id="item2"><h2>Hello World</h2><li>
            </ul>
        </div>
      </li>
   <ul>

jQuery：

$(document).ready(function () {
             $("#main").sortable({
                 connectWith: "#main",
                 placeholder: 'placeholder',
                 forcePlaceholderSize: true,
                 start: function (e, ui) {
                     var elementHeight = ui.item.height();
                     ui.placeholder.height(elementHeight);
                 }
             });

私のコードは次のようになります。

<script type="text/javascript">
         $(document).ready(function () {
             $('ul#main').sortable({
                 items: 'li:not(:last-child)',
                 placeholder: 'placeholder',
                 forcePlaceholderSize: true,
                 handle: '.grab-and-move-area',
                 start: function (e, ui) {
                     var elementHeight = ui.item.height();
                     ui.placeholder.height(elementHeight);
                 }
             });
         });
     </script>

編集：元のコードで最後のjsfiddleを追加しました：

元の作品をすべてコピーしました。ここにあります：http：//jsfiddle.net/wt4N8/1/ <-要約を本のセクションにドラッグすると、次のように表示されます。

編集：誰かがこれが正常に機能しない理由を教えてもらえますか？ありがとう！

4

1 に答える 1

0

私はあなたの不要なhtmlマークアップを取り除き、あなたul#mainをこのdivでラップしました。これにより、その中のすべてのsをで<div>接続できます。プレースホルダーが表示され、新しい子リストの作成など、階層のあるレベルから別のレベルにリストアイテムを移動できます。<ul>.sortable()

jquery1.8.3およびjquery-ui1.9.2を使用して、

html

<div id='sortablediv'>
  <ul id="main">
      <li id="content">
           Lorem ipsum..
      </li>
      <li id="Section1" class='section-head'>Section One
            <ul id="section-list1">
                <li id="item1">Hello World</li>
                <li id="item2">Hello Mars</li>
            </ul>
      </li>
      <li id="Section2" class='section-head'>Section Two
            <ul id="section-list2">
                <li id="item3">Goodbye World</li>
                <li id="item4">Goodbye Mars</li>
            </ul>
      </li>    
   <ul>
</div>

js

$(document).ready(function () {
             $("#sortablediv ul").sortable({
                 connectWith: "#sortablediv ul", //connect all uls with all other uls in #sortablediv
                 placeholder: 'placeholder'
             });
});

http://jsfiddle.net/S3836/18/

参照：http ：//a.shinynew.me/post/4641524290/jquery-ui-nested-sortables

于 2013-03-11T14:09:44.417 に答える