Question

在这里寻找一种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>

感谢。

Answer 1

我看到你有可放置的，但可拖动的地方在哪里？ Droppables接受draggables，而不仅仅是静态html（因为，实际上，在这种情况下没有任何东西被删除）

jQuery没有为连接的文件夹添加拖放功能

1 个答案: