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

Question

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

我可以设法让文件进入 'into' 文件夹，但不能让一个文件夹进入另一个文件夹。

这是一个演示：

好像有点矛盾，不知道去哪里找了。

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>

'butNotHere' class 是为了防止文件相互重叠。所有这些工作正常，除了如上所述的文件夹到文件夹拖动。

Answer 1

我发现错误了，JS中的变量（folderid）在real id前面多了一个字母'D'。我在测试期间这样做是为了检查它是被移动的文件还是文件夹。所以 'F' 或 'D'.

所以我改变了这一行

data-fldmid='D.7'

为此，它奏效了

data-fldmid='7'

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

jQuery drag-drop working for files, but not folders

javascript

jquery

jquery-ui-draggable