Add Drag/Drop Confirmation to Assets

Question

It would be nice to have a config option to control a confirmation dialog before performing a drag and drop operation. There would ideally be two options: one that controls the dialog for folder moves and one that controls the dialog for file moves. When a folder or file is dragged/dropped, a dialog would ask the user to confirm his or her intentions.

While I can't consistently reproduce it, there are times where folders are accidentally dragged/dropped. This appears to occur most often when Assets is busy trying to load its thumbnails and you go to click a different folder. It's as if the first folder selection hasn't released yet, so Assets tries to drop it on the newly selected folder, things go crazy, and now there's an accidental drag/drop.

Answer 1

This is a pretty simple hack if you're interested in this functionality. You can add your confirm() JavaScript to (in Assets 2.3.2) lines 791 (for folder confirmation) and 1057 (for file confirmation) in expressionengine/themes/third_party/assets/scripts/assets.js. Then, minimize assets.js to assets.min.js to apply the changes.

@@ -788,8 +788,8 @@
                    $('> a.assets-fm-expanded + ul', this.folderDrag.$draggee).show();

                     // Only move if we have a valid target and we're not trying to move into our direct parent
-                   if (
-                        this.folderDrag.$activeDropTarget
+                   if (confirm('Are you sure you want to move the selected folder(s)?')
+                        && this.folderDrag.$activeDropTarget
                         && this.folderDrag.$activeDropTarget.siblings('ul').find('>li').filter(this.folderDrag.$draggee).length == 0)
                    {

@@ -1054,7 +1054,8 @@

                onDragStop: $.proxy(function()
                {
-                   if (this.fileDrag.$activeDropTarget)
+                   if (confirm('Are you sure you want to move the selected file(s)?')
+                        && this.fileDrag.$activeDropTarget)
                    {
                        // keep it selected
                        this.fileDrag.$activeDropTarget.addClass('assets-selected');