[FIX] web_editor: review drag and drop in the editor

When dropping a snippet into a page, it is dropped in the drop-zone
which is the nearest of the user cursor. When moving a snippet, that
condition did not apply and the user was required to put the cursor at
the exact location of the drop-zone.

Also, for both drag and drop features, the drop zones which appeared
were not displayed correctly for full width columns, which made dropping
sometimes impossible when multiple col-*-12 were below each other.

task-1937758

closes odoo/odoo#30899

2 files changed, 33 insertions, 7 deletions

diff --git a/addons/web_editor/static/src/js/snippets.editor.js b/addons/web_editor/static/src/js/snippets.editor.js
index 97830d2ae8e..17c0c2ffb85 100644
--- a/addons/web_editor/static/src/js/snippets.editor.js
+++ b/addons/web_editor/static/src/js/snippets.editor.js
@@ -615,6 +615,10 @@ data.Class = Widget.extend({
         var self = this;
         var zone_template = $("<div class='oe_drop_zone oe_insert'/>");
 
+        function isFullWidth($elem) {
+            return $elem.parent().width() === $elem.outerWidth(true);
+        }
+
         if ($selector_children) {
             $selector_children.each(function () {
                 var $zone = $(this);
@@ -632,7 +636,10 @@ data.Class = Widget.extend({
                         'display': 'inline-block'
                     });
                 } else if (float === "left" || float === "right") {
-                    $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().last().outerHeight()), 30));
+                    $drop.css('float', float);
+                    if (!isFullWidth($zone)) {
+                        $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().last().outerHeight()), 30));
+                    }
                 }
 
                 $drop = $drop.clone();
@@ -647,7 +654,10 @@ data.Class = Widget.extend({
                         'display': 'inline-block'
                     });
                 } else if (float === "left" || float === "right") {
-                    $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().first().outerHeight()), 30));
+                    $drop.css('float', float);
+                    if (!isFullWidth($zone)) {
+                        $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.children().first().outerHeight()), 30));
+                    }
                 }
                 if (test) {
                     $drop.css({'float': 'none', 'display': 'inline-block'});
@@ -668,14 +678,20 @@ data.Class = Widget.extend({
                 if($zone.prev('.oe_drop_zone:visible').length === 0) {
                     $drop = zone_template.clone();
                     if (float === "left" || float === "right") {
-                        $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.prev().outerHeight() || Infinity), 30));
+                        $drop.css('float', float);
+                        if (!isFullWidth($zone)) {
+                            $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.prev().outerHeight() || Infinity), 30));
+                        }
                     }
                     $zone.before($drop);
                 }
                 if($zone.next('.oe_drop_zone:visible').length === 0) {
                     $drop = zone_template.clone();
                     if (float === "left" || float === "right") {
-                        $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.next().outerHeight() || Infinity), 30));
+                        $drop.css('float', float);
+                        if (!isFullWidth($zone)) {
+                            $drop.addClass("oe_vertical").css('height', Math.max(Math.min($zone.outerHeight(), $zone.next().outerHeight() || Infinity), 30));
+                        }
                     }
                     $zone.after($drop);
                 }
@@ -862,6 +878,7 @@ data.Editor = Class.extend({
     },
     _drag_and_drop_start: function () {
         var self = this;
+        this.dropped = false;
         self.buildingBlock.editor_busy = true;
         self.size = {
             width: self.$target.width(),
@@ -890,9 +907,18 @@ data.Editor = Class.extend({
         self._drag_and_drop_after_insert_dropzone();
         self._drag_and_drop_active_drop_zone($('.oe_drop_zone'));
     },
-    _drag_and_drop_stop: function () {
+    _drag_and_drop_stop: function (ev, ui) {
         var self = this;
 
+        // TODO lot of this is duplicated code of the d&d feature of snippets
+        if (!this.dropped) {
+            var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone').first();
+            if ($el.length) {
+                $el.after(this.$target);
+                this.dropped = true;
+            }
+        }
+
         $(".oe_drop_zone").droppable('destroy').remove();
 
         var prev = this.$target.first()[0].previousSibling;
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index 02094adf754..965a0ca820e 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -264,12 +264,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         }
 
         &.oe_vertical {
-            border: 2px dashed @odoo-brand-primary;
+            border: @odoo-dropzone-border;
             border-left: none;
             border-right: none;
 
             width: @odoo-dropzone-size;
-            float: left;
+            height: 100%;
             margin: 0 -@odoo-dropzone-size/2;
 
             &:after {