[FEATURE] PageLayoutModul - Drag'n'Drop

Use sortable grouping so records can't be moved into false list. Related: #379 Release: 8.0.0
T3Voila · May 30, 2022 · 2134d49 · 2134d49
1 parent afb7d6d
commit 2134d49
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/Resources/Private/Templates/Backend/Ajax/ContentElements.html b/Resources/Private/Templates/Backend/Ajax/ContentElements.html
@@ -11,7 +11,7 @@
         <f:for each="{contentElementsConfig}" as="section" key="sectionKey">
             <div class="tab-pane tvjs-drag" id="nav-{sectionKey}" role="tabpanel" aria-labelledby="nav-{sectionKey}-tab">
                 <f:for each="{section.contentElements}" as="contentElement" key="contentElementKey">
-                    <div class="row" data-elementRow="{contentElement.element-row -> f:format.json()}">
+                    <div class="row" data-record-table="tt_content" data-elementRow="{contentElement.element-row -> f:format.json()}">
                         <div class="col-1 dragHandle"><core:icon identifier="{contentElement.iconIdentifier}" size="default" /></div>
                         <div class="col-11">
                             <div><b>{contentElement.title}</b></div>

diff --git a/Resources/Public/JavaScript/PageLayout.js b/Resources/Public/JavaScript/PageLayout.js
@@ -118,10 +118,9 @@ define([
             new Sortable(allDropzones[i], {
                 revertOnSpill: true,
                 group: {
-                    name: 'dropzones',
-                    pull: function (to, from, evt, dragEvent) {
-// console.log(evt);
-console.log(dragEvent.ctrlKey);
+                    name: 'dropzones_' + allDropzones[i].dataset.childAllowed,
+                    pull: function (to, from, el, evt) {
+console.log(evt);
 //                         to.el.addClass('green');
                         if (to.el.id === 'navbarClipboard') {
                             return 'clone';
@@ -131,8 +130,8 @@ console.log(dragEvent.ctrlKey);
                         }
                         return true;
                     },
-                    put: function (to, from, el, evt, dragEvent) {
-console.log(evt.ctrlKey);
+                    put: function (to, from, el, evt) {
+console.log(evt);
 //                         console.log(el);
 //                         $(to.el).addClass('green');
                     },
@@ -191,11 +190,7 @@ console.log('onEnd');
                 },
                 onMove: function (/**Event*/evt, /**Event*/originalEvent) {
 console.log('onMove');
-                    if (evt.dragged.dataset.recordTable === evt.to.dataset.childAllowed) {
-                        $('.iAmGhost').addClass('blue');
-                        return true;
-                    }
-                    return false;
+                    $('.iAmGhost').addClass('blue');
                 },
                 onAdd: function (/**Event*/evt) {
 console.log('onAdd');
@@ -302,7 +297,7 @@ console.log('onAdd');
         for (var i = 0; i < allDragzones.length; i++) {
             new Sortable(allDragzones[i], {
                 group: {
-                    name: 'dropzones',
+                    name: 'dropzones_tt_content',
                     pull: 'clone',
                     put: false
                 },