Question

我正在使用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>

“ butNotHere”类用于防止文件相互重叠。除了如上所述将文件夹拖入文件夹外，所有其他方法都可以正常工作。

Answer 1

我发现了错误，JS（文件夹ID）中的变量在真实ID前面带有字母“ D”。我在测试期间进行了此操作，以检查它是否是文件或文件夹。所以是“ F”或“ D”。

所以我改变了这一行

expressApp.get('/interaction/:grant', async (req, res) => {
// The initial route hit by the client (Relying Party) that renders the login view if needed.
...
});

expressApp.post('/interaction/:grant/login', parse, (req, res, next) => {
        User.authenticate(req.body.email, req.body.password)
            .then((users) => {
             // returns an array of user objects that match the credentials
              if(!users.length)
              {
              // What now?  I can't just redirect back to /interaction/:grant - I get session not found

              }
      // the rest works well enough (for now)....
...
            }).catch(next);
      });

对此有效，

data-fldmid='D.7'

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

1 个答案: