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 来实现此目的效用: