Максимум-минимум
Из названия можно подумать что я собираюсь грузить вас высшей математикой, на самом деле нет.
Задача стояла простая, есть два элемента: внешний который задает область и внутренний, обозначающий предмет. При клике на внешнем надо было ставить внутренний центров в место клика. Если клик был слишком близко к краю внешнего элемента внутренний должен стать вплотную к краю, а не вышел краем за пределы внешнего.
Вот живая демонстрация, только тут для наглядности добавлен еще один элемент он отмечает область в которой внутренний элемент будет "прилипать" к краю внешнего.
Не смотря на то что там всего пара строчек кода, их написание заняло у меня очень много времени(((
jQuery(document).ready(function($){
$("#outer").mousedown(function(e){
var elt = $("#inner"),
self = $(this),
top = Math.min(Math.max(0, e.pageY - self.offset().top - elt.height() / 2), self.height() - elt.height()),
left = Math.min(Math.max(0, e.pageX - self.offset().left - elt.width() / 2), self.width() - elt.width());
elt.css({top:top,left:left});
//console.log({top:top,left:left});
});
});
Разберу самую интересную строчку
top = Math.min(Math.max(0, e.pageY - self.offset().top - elt.height() / 2), self.height() - elt.height())
Её можно расписать как
var
// относительная координата нажатия
pointY = e.pageY - self.offset().top,
// верхний отступ
// если половина высоты внутреннего больше
// расстояния от края до клика, то берем 0,
// иначе берем точку клика минус половину высоты
max = Math.max(0, pointY - elt.height() / 2),
// нижний отступ
// если высота внешнего элемента минус высота внутреннего
// меньше точки клика, то берем ее, иначе точку клика
top = Math.min(max, self.height() - elt.height());
Можно еще переписать на ифах, но так вообще не красиво
var pointY = e.pageY - self.offset().top,
top = 0;
if(top < pointY - elt.height() / 2)
top = pointY - elt.height() / 2;
if(top > self.height() - elt.height())
top = self.height() - elt.height();
Все тоже самое действительно и для координат по оси X
Свежие комментарии