[BUGFIX] Fix dragging of elements in page module 37/29837/4
authorJan Runte <jan.runte@hmmh.de>
Sat, 3 May 2014 21:01:33 +0000 (23:01 +0200)
committerFelix Oertel <mehl@foertel.com>
Sun, 4 May 2014 11:03:20 +0000 (13:03 +0200)
When dragging content elements in the page module, the element gets
overlayed by TCEform elements. It loses its hover state, when dragged
outside the viewport or very rapidly.

* Set z-index higher than 4000
* Add a css class to stabilize active drag state
* Remove duplicated javascript code in page module

Resolves: #58473
Releases: 6.2, 6.1
Change-Id: I87577d30e5d6bb16f6999d466bef92da95b2add3
Reviewed-on: https://review.typo3.org/29837
Reviewed-by: Felix Oertel
Tested-by: Felix Oertel
Reviewed-by: Nicole Cordes
Tested-by: Nicole Cordes
Reviewed-by: Wouter Wolters
typo3/sysext/cms/layout/js/typo3pageModule.js
typo3/sysext/t3skin/Resources/Public/Css/visual/module_web_page.css

index 6ccd31f..df9553d 100644 (file)
@@ -46,6 +46,9 @@ TYPO3.Components.PageModule = {
                                        this.el = Ext.get(this.getEl());
                                }
 
+                               // Add css class to define active state
+                               this.el.addClass('active-drag');
+
                                // Add css class for the drag shadow
                                this.el.child('.t3-page-ce-dragitem').addClass('dragitem-shadow');
                                // Hide create new element button
@@ -101,13 +104,12 @@ TYPO3.Components.PageModule = {
                                        Ext.get(el).removeClass('t3-page-ce-dropzone-available');
                                });
 
+                               // Remove css class to define inactive state
+                               this.el.removeClass('active-drag');
                                // Remove dragitem-shadow after dragging
                                this.el.child('.t3-page-ce-dragitem').removeClass('dragitem-shadow');
                                // Show create new element button again
                                this.el.child('.t3-icon-document-new').removeClass('drag-start');
-
-                               // Remove dragitem-shadow after dragging
-                               this.el.child('.t3-page-ce-dragitem').removeClass('dragitem-shadow');
                        },
 
                        // Called upon successful drop of an element on a DDTarget with the same
index 5507067..27539bf 100644 (file)
@@ -51,8 +51,8 @@ Web > Page
        background-color: #cacaca;
 }
 
-.t3-page-ce:hover {
-    z-index: 150;
+.t3-page-ce.active-drag {
+    z-index: 4500;
 }
 
 .t3-page-ce .t3-page-ce-body,