From eb758a1b9af63b1f374b08c4be9bf75696a2feea Mon Sep 17 00:00:00 2001
From: Vincent LAURENT <vince.laurent@gmail.com>
Date: Fri, 7 Oct 2022 10:47:13 +0200
Subject: [PATCH] Drag and drop with only detecting change and direction more
 easier et reliable

---
 public/js/organization.js       | 47 ++++++++++++++++++++++-----------
 templates/organization.html.php |  2 +-
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/public/js/organization.js b/public/js/organization.js
index 94cf412..173e85f 100644
--- a/public/js/organization.js
+++ b/public/js/organization.js
@@ -120,24 +120,39 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
                     if (e.preventDefault) {
                         e.preventDefault();
                     }
-                    let element = this;
-                    // vers le haut
-                    if(this.offsetTop < document.querySelector('#'+e.dataTransfer.getData('element')).offsetTop && e.layerX <= element.clientWidth / 2) {
-                        element = this.previousSibling;
-                    }
-                    // vers le bas
-                    if(this.offsetTop > document.querySelector('#'+e.dataTransfer.getData('element')).offsetTop && e.layerX > element.clientWidth / 2) {
-                        element = this.nextSibling;
+                    let pdfOver = this;
+                    let pdfMoving = document.querySelector('#'+e.dataTransfer.getData('element'));
+
+                    if(pdfOver.id == pdfMoving.id) {
+
+                        return;
                     }
 
-                    if(!element.draggable && !this.previousSibling.draggable) {
-                        this.insertAdjacentElement('beforebegin', document.querySelector('#'+e.dataTransfer.getData('element')));
-                    } else if(!element.draggable && !this.nextSibling.draggable) {
-                        this.insertAdjacentElement('beforebegin', document.querySelector('#'+e.dataTransfer.getData('element')));
-                    } else if (e.layerX > element.clientWidth / 2) {
-                        element.insertAdjacentElement('beforebegin', document.querySelector('#'+e.dataTransfer.getData('element')));
-                    } else {
-                        element.insertAdjacentElement('afterend', document.querySelector('#'+e.dataTransfer.getData('element')));
+                    let leftRight = false;
+                    let topBottom = false;
+
+                    if(pdfOver.offsetTop < pdfMoving.offsetTop) {
+                        topBottom = 'top';
+                    }
+
+                    if(pdfOver.offsetTop > pdfMoving.offsetTop) {
+                        topBottom = 'bottom';
+                    }
+
+                    if(pdfOver.offsetLeft > pdfMoving.offsetLeft) {
+                        leftRight = 'right';
+                    }
+
+                    if(pdfOver.offsetLeft < pdfMoving.offsetLeft) {
+                        leftRight = 'left';
+                    }
+
+                    if (leftRight == 'left' || topBottom == 'top') {
+                        pdfOver.insertAdjacentElement('beforebegin', pdfMoving);
+                    }
+
+                    if (leftRight == 'right' || topBottom == 'bottom') {
+                        pdfOver.insertAdjacentElement('afterend', pdfMoving);
                     }
 
                     return false;
diff --git a/templates/organization.html.php b/templates/organization.html.php
index 9ed5766..ca8bd61 100644
--- a/templates/organization.html.php
+++ b/templates/organization.html.php
@@ -103,6 +103,6 @@
     <script>
     var maxSize = <?php echo $maxSize ?>;
     </script>
-    <script src="/js/organization.js?202210070140"></script>
+    <script src="/js/organization.js?2022100701047"></script>
   </body>
 </html>
\ No newline at end of file