如何实现jquery ui可排序的占位符纵向和横向？

Question

我想在水平（顶部和底部）和垂直（左侧或右侧）显示jquery ui占位符，就像我的示例图像一样。但目前我的代码只显示顶部或底部占位符。当我放置一个元素时，占位符显示在底部或顶部位置，但是当我丢弃元素时，它放置不正确。 这是我的示例代码

            helper: function (event, ui) {
                this.copyHelper = ui.clone().insertAfter(ui);
                return ui.clone();
            },
            placeholder: {
                element: function(currentItem) {
                    return $('<div style="height: 5px; padding: 0; background-color: #F78828;" ></div>');
                },
                update: function(container, p) {$(container.element[0]).addClass("place_here_div");
                    return;
                }
            },

这里的行列只是一个例子。它可能是任何一种元素。（div，paragraph，span等）

Answer 1

我不知道我的答案是否对您有用，因为这是原生HTML5拖放的想法。您需要引入一个附加元素“行”：

<div class="root">
   <div class="row">
     <div class="col-3">component 1</div>
     <div class="col-3">component 2</div>
     <div class="col-3">component 3</div>
     <div class="col-3">component 4</div>
   </div>
   <div class="row"><div>
   <div class="row"><div>
</div>

然后订阅dragover事件。在event中，您将拥有属性target，然后可以定义自己的位置。然后找到最接近的放置容器（行或根）作为目标。如果在行中-垂直放置，否则水平放置。