我想在水平(顶部和底部)和垂直(左侧或右侧)显示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等)
答案 0 :(得分:0)
我不知道我的答案是否对您有用,因为这是原生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
,然后可以定义自己的位置。然后找到最接近的放置容器(行或根)作为目标。如果在行中-垂直放置,否则水平放置。