jQuery - перетаскиваемые и разные экраны (по размеру экрана)

Question

У меня много перетаскиваемых div'ов на моей странице

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

Я сохраняю новую позицию на dragstop и помещаю новые значения top и left в 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 на основе размера экрана и сохраните его.