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

发布于 2024-09-20 00:14:53 字数 320 浏览 8 评论 0原文

我的页面上有许多可拖动的 div，

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

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

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

如果屏幕太小，可以解决这个问题吗？

提前致谢！

原文

I have many draggable div's on my page

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

I save the new position on dragstop and put the new top and left values into the SQL.

Ok, everything works great. But when I visit my Page with the Laptop (small screen) some div are out of the screen and a scrollbar is shown.

Is it possible to fix this if the screen is too small?

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

软的没边 2024-09-27 00:14:53

你可以检查 $(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 });
}

您还可以使用 jqueryuiposition 实用程序来实现此目的：

You could check the $(window).width() and do a little math to see if you need to move your 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 });
}

You may also acheive this with the jqueryui position utility:

回复收藏 0 原文