我正在使用
jquery sortable来跨多个容器对元素进行排序.
我有帮助选项设置为’克隆’就像这样
$("#sup").sortable({
helper: "clone"
});
所以这里发生的是当一个元素开始拖动时,jQuery会创建一个副本并将其附加到正文,这将成为实际被拖动的元素(帮助者),而不是原始元素.
拖动开始时,我的助手可能会改变位置.但是,jQuery认为帮助器就是放置它的位置,即使我使用margin更改了它的位置,当将元素放入容器中时,帮助器实际上并没有超过它(因为我改变了辅助位置).
问题：如何让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您可以看到占位符突出显示将转到下一个容器,即使它没有完全悬停它.因为块位置不是jquery设置的.
解决方法
您可以更改可排序的
tolerance,以便它使用光标的位置而不是辅助块来检测要移动到的容器/目标.
我有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,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>