我正在尝试实现与“Sortable Widget”非常接近的功能,但由于其他事情与预制小部件不兼容,因此无法使用它。因此,我正在尝试使用可拖动和可放置元素重新创建其功能:
$(".Element").draggable({
helper: 'original',
drag: function(event, ui) {
ElementWidth = $(this).outerWidth(true);
if($(this).prev().length){
LeftElementWidth = $(this).prev().outerWidth(true);
LeftElementLeftOffset = $(this).prev().offset().left;
if(parseFloat(ui.offset.left+(ElementWidth/2)) < parseFloat(LeftElementLeftOffset+(LeftElementWidth/2))){
$(this).prev().before($(this));
}
}
if($(this).next().length){
RightElementWidth = $(this).next().outerWidth(true);
RightElementLeftOffset = $(this).next().offset().left;
if(parseFloat(ui.offset.left+(ElementWidth/2)) > parseFloat(RightElementLeftOffset+(RightElementWidth/2))){
$(this).next().after($(this));
}
}
}
});
$("#Container").droppable({ accept: '.Element' });
除了拖动助手不在鼠标光标下保持位置之外,它的功能很好。当我将其元素移动到下一个位置时,请查看此fiddle:
您将看到在尝试排序绿色框时会发生什么。如何保持助手的位置?