Javascript jQuery拖放用于文件，但不用于文件夹

我使用jquery和jquery UI插件来拖放元素（文件夹和文件），就像在文件浏览器中一样

我可以设法将文件“放入”文件夹，但不能将文件夹放入另一个文件夹

下面是一个演示：

似乎有些矛盾，但我不知道该去哪里找了

javascript如下所示：

$(function () {
// fancytree is part of another script
   $("#tree").fancytree({
      expandLazy: true,
      activate: function (event, data) {
         var node = data.node;
         if (node.data.href) {
            window.open(node.data.href, node.data.target);
         }
      }
   });
/* DRAG AND DROP STARTS HERE */
   $(".listitems").draggable();
   $(".droppable").droppable({
      //preventCollision: true,
      drop: function (event, ui) {
         var draggableId = ui.draggable.attr("id");
         var droppableId = $(this).attr("id");
         //alert('FILE'+draggableId+' DROPED INTO '+droppableId);
         $(this).append(ui.draggable);
         var itemid = ui.draggable.attr('data-itemid');
         var folderid = ui.draggable.attr('data-fldmid');

         if (typeof folderid == 'undefined') {
            folderid = 0;
         }
         if (typeof itemid == 'undefined') {
            itemid = 0;
         }
         if (typeof droppableId == 'undefined') {
            droppableId = 0;
         }

         $.ajax({
            method: "POST",
            url: "_ajax/filemanager/dragdrop.php",
            //data :  'FileID='+ itemid +'&FolderID='+ droppableId,
            data: 'FileID=' + itemid + '&FolderID=' + folderid + '&DropID=' + droppableId,
         }).done(function (data) {
            var result = $.parseJSON(data);
            if (folderid == 0) {
               //alert('FILE MOVED - FileID='+ itemid +'&FolderID='+ folderid+'&DropID='+ droppableId);
               // Done moving file, hiding it
               $("div#" + itemid).hide(500);
            } else {
               //alert('FOLDER MOVED - FileID='+ itemid +'&FolderID='+ folderid+'&DropID='+ droppableId);
               // Done moving directory, hiding it
               $("div#" + folderid).hide(500);
            }

            //$("div#"+folderid).hide(500);
            //$("div#"+droppableId).hide(500);
         });
      }
   });
   $(".listitems").sortable();
   $(".listitems").disableSelection();

   var shouldCancel = false;
   $('.dragMe').draggable({
      containment: '.moveInHere',
      revert: function () {
         if (shouldCancel) {
            shouldCancel = false;
            return true;
         } else {
            return false;
         }
      }
   });
   $('.butNotHere').droppable({
      over: function () {
         shouldCancel = true;
      },
      out: function () {
         shouldCancel = false;
      }
   });

});

这是html

<div class="box-body">
   <div class="table-responsive mailbox-messages moveInHere" style="overflow: hidden; min-height:600px;">
         <p>
         <!--id, data-fldmid and data-itemid were added for testing purposes -->
         <div class="boxFile small droppable listitems dragMe drag" id="D.4" data-fldmid='D.4' data-itemid='4'>
            <a href="?n=9">
               <div class="ffolder small yellow"></div>
            </a>
            <div class="boxFileTitle">Folder 1 (4)</div>
         </div>
         <div class="boxFile small droppable listitems dragMe drag" id="D.7" data-fldmid='D.7' data-itemid='7'>
            <a href="?n=7">
               <div class="ffolder small yellow"></div>
            </a>
            <div class="boxFileTitle">Folder A (7)</div>
         </div>
         <p>
         <div style="" class="boxFile small listitems butNotHere dragMe drag" id="26" data-itemid='26'>
            <img src='image.php?id=26' class='UploadedImageThumb'>                            
            <div class="boxFileTitle">2016-12-12 14.50.14.jpg26</div>
            <div class="boxFileOption">Preview | Edit | Trash</div>
         </div>
         </p>
         <p>
         <div style="" class="boxFile small listitems butNotHere dragMe drag" id="25" data-itemid='25'>
            <img src='image.php?id=25' class='UploadedImageThumb'>                            
            <div class="boxFileTitle">test.jpg25</div>
            <div class="boxFileOption">Preview | Edit | Trash</div>
         </div>
         </p>
         </p>
   </div>
</div>

文件夹1（4）
文件夹A（7）

2016-12-12 14.50.14.jpg26
预览|编辑|垃圾


test.jpg25
预览|编辑|垃圾

---

“butNotHere”类用于防止文件相互重叠。所有这些都可以正常工作，除了如上所述将文件夹拖动到文件夹中。

我发现了错误，JS（folderid）中的变量在真实id前面有一个字母“D”。我在测试过程中这样做是为了检查它是否是正在移动的文件或文件夹。所以“F”或“D”

所以我改变了这一行

data-fldmid='D.7'

对此，它起了作用

data-fldmid='7'