Implement drag-n-drop menu

skins/elastic/ui.js

@@ -170,6 +170,10 @@ function rcube_elastic_ui()
 
             $(this).on('change', function() { hidden.val($(this).val()); }).change();
         });
+
+        $('#dragmessage-menu,#dragcontact-menu').each(function() {
+            rcmail.gui_object('dragmenu', this.id);
+        });
     };
 
     /**
@@ -833,8 +837,8 @@ function rcube_elastic_ui()
                 'aria-owns': popup_id,
             })
             .popover({
-                trigger: $(item).data('popup-trigger') || 'click',
                 content: popup,
+                trigger: $(item).data('popup-trigger') || 'click',
                 placement: $(item).data('popup-pos') || 'bottom',
                 animation: true,
                 html: true
@@ -910,18 +914,22 @@ function rcube_elastic_ui()
      */
     function menu_toggle(p)
     {
-        if (p && p.name == 'messagelistmenu') {
+        if (!p || !p.name) {
+            return;
+        }
+
+        if (p.name == 'messagelistmenu') {
             menu_messagelist(p);
         }
-        else if (p && p.name) {
-            var target = p.originalEvent.target;
+        else if (p.event == 'menu-open') {
+            var fn, pos,
+                content = $('ul:first', p.obj),
+                target = p.originalEvent.target;
 
             if ($(target).is('span')) {
                 target = $(target).parents('a,li')[0];
             }
 
-            if (p.event == 'menu-open') {
-                var fn, content = $('ul:first', p.obj);
             if (p.name == 'folder-selector') {
                 content.addClass('listing folderlist');
             }
@@ -929,6 +937,20 @@ function rcube_elastic_ui()
                 content.addClass('listing');
             }
 
+            if (p.name.match(/^drag/)) {
+                // create a fake element to position drag menu on the cursor position
+                pos = rcube_event.get_mouse_pos(p.originalEvent);
+                target = $('<a>').css({
+                        position: 'absolute',
+                        left: pos.x,
+                        top: pos.y,
+                        height: '1px',
+                        width: '1px',
+                        visibility: 'hidden'
+                    })
+                    .appendTo(document.body).get(0);
+            }
+
             // Popover menus use animation. Sometimes the same menu is
             // immediately hidden and shown (e.g. folder-selector for copy and move action)
             // we have to way until the previous menu hides before we can open it again
@@ -938,7 +960,11 @@ function rcube_elastic_ui()
                 }
 
                 if (!$(target).data('popup')) {
-                        $(target).data({popup: p.name, 'popup-pos': 'right', 'popup-trigger': 'manual'});
+                    $(target).data({
+                        popup: p.name,
+                        'popup-pos': 'right',
+                        'popup-trigger': 'manual'
+                    });
                     popup_init(target);
                 }
 
@@ -954,7 +980,6 @@ function rcube_elastic_ui()
 
         // Stop propagation so multi-level menus work properly
         p.originalEvent.stopPropagation();
-        }
     };
 
     /**
@@ -972,7 +997,12 @@ function rcube_elastic_ui()
             target = $('#' + name).data('button');
         }
 
+        if (name.match(/^drag/)) {
+            $(target).popover('dispose').remove();
+        }
+        else {
             $(target).popover('hide');
+        }
     };
 
     /**