From fed5854e32bcddf8b14b8311b2fe542eed990f77 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Mon, 15 Feb 2021 10:22:03 +0000
Subject: [PATCH] [FIX] web_editor: fix drag and drop when drop zones are too
 close

Before this commit, the preview of the dragged snippet didn't work
when moving a dragged snippet from a drop zone to an other drop zone
when there was no space between those drop zones.

It is because, in this case, the over event of the second drop zone is
triggered before the out event of the first drop zone.

task-2312878

closes odoo/odoo#66267

X-original-commit: 66b468626e046a13a463cff3a2285801016f3ed7
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.editor.js   | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index fbad9839dde..12097cb3089 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -668,10 +668,12 @@ var SnippetEditor = Widget.extend({
 
         this.$editable.find('.oe_drop_zone').droppable({
             over: function () {
-                if (!self.dropped) {
-                    self.dropped = true;
-                    $(this).first().after(self.$target).addClass('invisible');
+                if (self.dropped) {
+                    self.$target.detach();
+                    $('.oe_drop_zone').removeClass('invisible');
                 }
+                self.dropped = true;
+                $(this).first().after(self.$target).addClass('invisible');
             },
             out: function () {
                 var prev = self.$target.prev();
@@ -2025,11 +2027,14 @@ var SnippetsMenu = Widget.extend({
 
                     self.getEditableArea().find('.oe_drop_zone').droppable({
                         over: function () {
-                            if (!dropped) {
-                                dropped = true;
-                                $(this).first().after($toInsert).addClass('invisible');
-                                $toInsert.removeClass('oe_snippet_body');
+                            if (dropped) {
+                                $toInsert.detach();
+                                $toInsert.addClass('oe_snippet_body');
+                                $('.oe_drop_zone').removeClass('invisible');
                             }
+                            dropped = true;
+                            $(this).first().after($toInsert).addClass('invisible');
+                            $toInsert.removeClass('oe_snippet_body');
                         },
                         out: function () {
                             var prev = $toInsert.prev();