更新：找到关于错误http://bugs.jqueryui.com/ticket/5718的这张票。我尝试了 position:absolute 但它破坏了 html 上的数据
我已经在我的应用程序中实现了拖放来对数据进行排序。拖动数据时，必须与其他数据对齐。但是在下图中。
请注意，当我拖动 Internet 时，它会出现在顶部。
拖动时必须与其他对齐。如何解决这个问题？有没有办法让数据在拖动时必须在光标中，而不是在顶部？
以下是拖放的代码：
<script>
var addPositions = function() {
$('.dropenv, .dropcat').each(function() {
var position = 0;
$(this).children().each(function() {
$(this).data('position', position);
position++;
});
});
};
$(document).ready(function() {
addPositions();
$(".dropenv").sortable({
connectWith: "tbody.env-data",
dropOnEmpty: true,
handle: '.env-handle',
start: function(event, ui) {
parentID = ui.item.parent().siblings('tr').attr('id');
},
stop: function(event, ui) {
datas = new Array();
var i = 0;
ui.item.closest('tbody').children('tr').each(function() {
datas[i] = $(this).attr('id');
i++;
});
$.ajax({
type: "POST",
data: {
'cat_id': parentID,
'env[]': datas,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
url:"/envelopes/sort/",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function(data) {
notify('', data, { autoClose: true, delay: 1000 });
},
error: function(ts) {
notify('', ts.responseText, { autoClose: true, delay: 1000 });
}
});
}
});
$( ".dropcat").sortable({
connectWith: "tbody.cat-data",
dropOnEmpty: true,
handle: '.cat-handle',
update: function(){
datas = new Array();
var i = 0;
$('.dropcat tr.masterList').each(function() {
datas[i] = $(this).attr('id');
i++;
});
$.ajax({
type: "POST",
data: {
'cat[]': datas,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
url:"/envelopes/categories/sort/",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function(data) {
notify('', data, { autoClose: true, delay: 1000 });
},
error: function(ts) {
notify('', ts.responseText, { autoClose: true, delay: 1000 });
}
});
}
});
});
</script>