gpt4 book ai didi

jquery - 刷新助手位置

转载 作者:行者123 更新时间:2023-12-03 22:33:32 27 4
gpt4 key购买 nike

我使用 jquery sortable 对多个容器中的元素进行排序。

我将辅助选项设置为“克隆”,如下所示

$("#sup").sortable({
helper: "clone"
});

所以这里发生的是,当一个元素开始拖动时,jQuery 创建一个副本并将其附加到正文,这成为实际被拖动的元素(助手),而不是原始元素。

当拖动开始时,我的助手可能会改变位置。然而,jQuery 认为助手就在它放置的位置,即使我使用边距更改了它的位置,当将元素放入容器内时,助手实际上并未位于它上方(因为我更改了助手位置)。

问题:更改后如何让 jQuery 重新计算助手的位置?

$("#sup").sortable({
helper: "clone",
start: function(event, ui) {
var marginsToSet = ui.item.data().sortableItem.margins;

// helper position changed
ui.helper.css('margin-left', marginsToSet.left);
ui.helper.css('margin-top', marginsToSet.top);
}
});

示例:http://codepen.io/anon/pen/qZaNJZ您可以看到占位符突出显示将转到下一个容器,即使它没有完全悬停在其上。因为 block 位置不是jquery设置的。

最佳答案

您可以更改 tolerance对于可排序,因此它使用光标的位置而不是辅助 block 来检测要移动到哪个容器/目标。

我有forked your Codepen ,或在下面重新创建它:

var sortableInitialised = false;

$(function() {
var $div = $("div");

var $input = $('input[type=checkbox]').on('change', function() {
var isChecked = $(this).prop('checked');
makeSortable($div, isChecked ? 'pointer' : 'intersect');
});

makeSortable($div, 'intersect');
});

function makeSortable(elem, tolerance) {
if (sortableInitialised) {
// if changing, start from scratch
elem.sortable('destroy');
}
elem.sortable({
connectWith: "div",
appendTo: document.body,
placeholder: "placeholder",
helper: "clone",
tolerance: tolerance,
start: function(event, ui) {
var marginsToSet = ui.item.data().sortableItem.margins;
ui.helper.css('margin-left', marginsToSet.left);
ui.helper.css('margin-top', marginsToSet.top);
}
});
sortableInitialised = true;

// update heading
$('h2').text("tolerance: '" + tolerance + "'" + (tolerance === 'intersect' ? ' (default)' : ' (proposed)'));
}
h2, p {
margin: 0;
font-family: sans-serif;
}
div {
width: 150px;
height: 100px;
background-color: #f7f7f7;
margin: 10px;
display: inline-block;
}
span {
display: block;
width: 50px;
height: 50px;
background-color: black;
margin: 0 auto;
margin-top: 25px;
box-sizing: border-box;
}
.placeholder {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<h2>tolerance: 'intersect' (default)</h2>
<div><span></span>
</div>
<div></div>
<div></div>

<p>
<label>
<input type="checkbox">Use pointer tolerance
</label>
</p>

关于jquery - 刷新助手位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35964361/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com