Javascript jQuery未将拖放附加到连接的文件夹_Javascript_Jquery_Jquery Ui_Jquery Ui Sortable

Javascript jQuery未将拖放附加到连接的文件夹

javascript jquery jquery-ui

Javascript jQuery未将拖放附加到连接的文件夹,javascript,jquery,jquery-ui,jquery-ui-sortable,Javascript,Jquery,Jquery Ui,Jquery Ui Sortable,这里是一种Windows资源管理器风格的拖放文件夹行为。“//make chapter items droppable”块不起作用-特别是，它没有将可拖动项附加到已拖动文件夹的列表中 <html> <head> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.7.2.custom.

这里是一种Windows资源管理器风格的拖放文件夹行为。“//make chapter items droppable”块不起作用-特别是，它没有将可拖动项附加到已拖动文件夹的列表中

 <html>

 <head>

  <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

  <style>

   ul
   {
    margin: 0;
    padding: 0;
   }

   ul#chapter_list
   {
    background: #fff;
   }

   #chapter_list li
   {
    list-style-type: none;
    position: relative;
   }

   #chapter_list li .sortable_handle
   {
    cursor: move;
    padding: 2px .5em 5px 5px;
    position: relative;
    top: -2px;
    left: -5px;
   }
   span.chapter_title
   {
    cursor: pointer;
    padding-left: 36px !important;
    background: url(http://www.openwebgraphics.com/resources/data/2296/22x22_folder_orange_open.png) no-repeat 8px 50%;
   }

   .comic_chapter div, .comic_page
   {
    border: 2px solid black;
    margin-bottom: 1px;
    padding: 3px 5px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
   }

   li.comic_chapter ul
   {
    padding: 2px 2px 2px 1em;
    margin: 3px;
   }

   #chapter_list li.drop_highlight div
   {
    background: darkBlue;
    color: white;
   }

   .comic_chapter div
   {
    background: LightBlue;
   }

   .comic_page
   {
    background: #fff;
   }

   .chapter-placeholder
   {
    border: 2px dashed LightBlue;
    margin: 2px;
   }
   .page-placeholder
   {
    height: 1.6em;
    border: 2px dashed #666;
    margin: 2px;
   }

  </style>

 </head>

 <body>

  <script type="text/javascript" />

   var chapter_list = {

    0 : {

     'chapter_title' : 'Un-Chaptered',
     'chapter_pages' : {}

    },
    1 : {

     'chapter_title' : 'Chapter 1',
     'chapter_pages' : {

      1 : {

       'page_title' : 'Page 1'

      },
      2 : {

       'page_title' : 'Page 2'

      },
      3 : {

       'page_title' : 'Page 3'

      },
      4 : {

       'page_title' : 'Page 4'

      },
      5 : {

       'page_title' : 'Page 5'

      },
      6 : {

       'page_title' : 'Page 6'

      }

     }

    },
    2 : {

     'chapter_title' : 'Chapter 2',
     'chapter_pages' : {

      7 : {

       'page_title' : 'Page 7'

      },
      8 : {

       'page_title' : 'Page 8'

      },
      9 : {

       'page_title' : 'Page 9'

      },
      10 : {

       'page_title' : 'Page 10'

      }

     }

    },
    3 : {

     'chapter_title' : 'Chapter 3',
     'chapter_pages' : {

      11 : {

       'page_title' : 'Page 11'

      },
      12 : {

       'page_title' : 'Page 12'

      }

     }

    }

   };

   document.write('<ul id="chapter_list">');

   for (i in chapter_list) {

    chapter = chapter_list[i];

    document.write('<li id="chapter_' + i + '" class="comic_chapter">' +
     '<div>' +
      '<span class="sortable_handle">||</span>');

      if (i > 0) document.write('<input type="checkbox" />');

    document.write('<span class="chapter_title">' + chapter.chapter_title + '</span>' +
     '</div>' +
     '<ul id="chapter_' + i + '_pages">');

      for (n in chapter.chapter_pages) {

       page = chapter.chapter_pages[n];

       document.write('<li id="page_' + n + '" class="comic_page">' +
        '<span class="sortable_handle">||</span>' +
        '<label for="page_' + n + '_chk">' +
         '<input type="checkbox" id="page_' + n + '_chk" />' + 
         ' <span class="page_title">' + page.page_title + '</span>' +
        '</label>' +
       '</li>');

      }

     document.write('</ul>' +
    '</li>');

   }

   document.write('</ul>');

  </script>

  <div id="debug"></div>

  <script type="text/javascript">

   // hide Chapter contents
   $('.comic_chapter ul').hide();

   // add onClick => toggle chapter-contents visibility
   $('.chapter_title').bind('click', function(e){
    $(this).parents('li.comic_chapter').children('ul').toggle();
   });

   // make Chapters sortable
   $('#chapter_list').sortable({
    handle: 'div .sortable_handle',
    placeholder: 'chapter-placeholder',
    forcePlaceholderSize: true
   }).disableSelection();

   // make Pages sortable
   $('.comic_chapter ul').sortable({
    handle: '.sortable_handle',
    placeholder: 'page-placeholder',
    connectWith: '.comic_chapter ul' // allow pages to be dragged between chapters
   }).disableSelection();

   $('.comic_chapter ul').droppable({
    greedy: true
   });

   // make chapter items droppable
   $('#chapter_list').children('li').droppable({
    accept: '.comic_page',
    hoverClass: 'drop_highlight',
    drop: function(e, ui) {
     $(this).children('ul').append(ui.draggable);
    }
   });


  </script>

 </body>

</html>


保险商实验室
{
保证金：0；
填充：0；
}
ul#第#章清单
{
背景：#fff；
}
#第四章李
{
列表样式类型：无；
位置：相对位置；
}
#第章列表li.可排序句柄
{
光标：移动；
填充物：2px.5em 5px 5px；
位置：相对位置；
顶部：-2px；
左：-5px；
}
第四章标题
{
光标：指针；
左侧填充：36px！重要；
背景：url(http://www.openwebgraphics.com/resources/data/2296/22x22_folder_orange_open.png)不重复8px 50%；
}
.comic_章分区，.comic_页
{
边框：2件纯黑；
边缘底部：1px；
填充物：3px 5px；
-moz边界半径：6px；
-webkit边界半径：6px；
}
li.comic_第二章
{
衬垫：2件2件2件1米；
保证金：3倍；
}
#章节列表li.drop突出显示div
{
背景：深蓝色；
颜色：白色；
}
.漫画组
{
背景：浅蓝色；
}
.漫画页
{
背景：#fff；
}
.章节占位符
{
边框：2个浅蓝色虚线；
保证金：2倍；
}
.页面占位符
{
高度：1.6em；
边框：2个虚线#666；
保证金：2倍；
}
var章节列表={
0 : {
“章节标题”：“无章节”，
'第_章页数'：{}
},
1 : {
“第章标题”：“第1章”，
“第十一章页数”：{
1 : {
“页面标题”：“第1页”
},
2 : {
“页面标题”：“第2页”
},
3 : {
“页面标题”：“第3页”
},
4 : {
“页面标题”：“第4页”
},
5 : {
“页面标题”：“第5页”
},
6 : {
“页面标题”：“第6页”
}
}
},
2 : {
“第二章标题”：“第二章”，
“第十一章页数”：{
7 : {
“页面标题”：“第7页”
},
8 : {
“页面标题”：“第8页”
},
9 : {
“页面标题”：“第9页”
},
10 : {
“页面标题”：“第10页”
}
}
},
3 : {
“第三章标题”：“第三章”，
“第十一章页数”：{
11 : {
“第11页标题”：“第11页”
},
12 : {
“页面标题”：“第12页”
}
}
}
};
文件。书写（“”）；
适用于（第i章清单）{
章节=章节列表[i]；
文档。编写（'li id=“chapter\u”+i+'”class=“comic\u chapter”>'+
'' +
'||');
如果（i>0）文件。写入（“”）；
文件。书写（“”+章节。章节标题+“”+
'' +
“”；
用于（第章第n章第u页）{
第页=章节。第页[n]；
document.write（'li id=“page”+n+'class=“comic\u page”>'+
'||' +
'' +
'' + 
''+page.page_title+''页+
'' +
“”）；
}
文件。写入（“”+
“”）；
}
文件。写（“”）；
//隐藏章节内容
$（'.comic_chapter ul'）.hide（）；
//添加onClick=>切换章节内容可见性
$（'.chapter_title'）.bind（'click'，函数（e）{
$（this）.parents（'li.comic_chapter'）.children（'ul'）.toggle（）；
});
//使章节可排序
$（“#章节列表”）。可排序({
句柄：'div.sortable_handle'，
占位符：“章节占位符”，
强制占位符大小：true
}).disableSelection（）；
//使页面可排序
$（'.comic_章ul'）。可排序({
句柄：'.sortable_句柄'，
占位符：“页面占位符”，
connectWith:'.comic_chapter ul'//允许在章节之间拖动页面
}).disableSelection（）；
$（'.comic_章ul'）。可拖放({
贪婪：是的
});
//使章节项目可拖放
$（“#章_列表”）。子项（'li'）。可拖放({
接受：'.comic_页'，
hoverClass:“drop_highlight”，
drop：函数（e、ui）{
$（this.children（'ul'）.append（ui.draggable）；
}
});

谢谢。

我看到你们有可拖放的，但可拖放的在哪里？Dropables接受Dragables，而不仅仅是静态html（因为，实际上，在这种情况下，没有任何内容被删除）

我对混乱的代码表示歉意。显然，我试图在代码标记中添加太多垃圾。您只需在每行前面添加4个空格，它将修复代码格式问题，请将4个空格添加到您的代码中，以便我们可以帮助您。：-）格式是固定的，感谢您指出问题“页面”排序表本质上是可拖动的。您让它接受“.comic\u Page”，它是可拖动（.comic\u chapter ul）中的li元素，因此我认为它没有注册。comic\u Page是可拖动的。“.comic\u Page”是排序表中的li元素，我的假设是container div是可排序/可拖动的，而不是其中的子对象。你测试过了吗？