jQuery - 可拖动和不同的屏幕（适合屏幕）

Question

我的页面上有很多可拖动的div

$('#bibo').draggable({
    addClasses: false,
    containment: 'window',
    zIndex: '999',
    stack: '.tko.sto'
});

我将新位置保存在dragstop上，并将新的顶部和左侧值放入SQL中。

好的，一切都很好。但当我使用笔记本电脑（小屏幕）访问我的页面时，屏幕外有一些div，并显示滚动条。

如果屏幕太小，是否可以解决此问题？

提前致谢！

Answer 1

您可以检查$（window）.width（）并做一些数学运算，看看是否需要移动div。

var windowWidth = $(window).width();
var left = $("div").position().left;
var width = $("div").width();
if (windowWidth < left + width) {                
    var newLeft = left - ((left + width) - windowWidth);
    $("div").css({ left: newLeft });
}

您也可以使用jqueryui position实用程序

来实现此目的

Answer 2

一个简单的解决方案是计算相对大小并相应调整。例如，不是保存直接的x，y坐标，而是根据屏幕大小计算x，y百分比并保存。