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

Question

I'm using the jquery and jquery UI plugin to drag and drop elements (folders and files) just like in a filebrowser.

I can manage to have the file go 'into' the folder, but not a folder to go into another.

Here is a demo :

There seems to be something conflicting, but I don't know where to look anymore.

The javascript is like this :

$(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;
      }
   });

});

And here is the 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>

The 'butNotHere' class is to prevent files to be on top of each other. All this works fine, except the folder-into-folder dragging as described above.

Answer 1

I found the error, the variable in JS (folderid) had a letter 'D' in front of the real id. I did this during test to check if it was a file being moved or folder. So 'F' or 'D'.

So I changed this line

data-fldmid='D.7'

To this and it worked

data-fldmid='7'