@ArtJH

Как в js div тянуть другому div?

https://codepen.io/ArtJH/pen/qBbzXqy

Есть два дива. Нужно потянуть синий квадрат к красному и когда он коснется или сойдутся, то выскочит alert('true')
Но пользователь может тянуть синий блок только по диагонали к красному блоку. Если будет тянуть синий блок в другие стороны, то синий не должен двигаться.

Подскажите как реализовать такое? Куда копать? Или если есть скиньте примеры. Спасибо
  • Вопрос задан
  • 145 просмотров
Пригласить эксперта
Ответы на вопрос 2
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Ответ написан
Комментировать
@alexalexes
Копать в математику 7 класса или в алгебру 1 курса универа, раздел "линейные функции".
Дано:
1. координата курсора мыши в момент захвата блока: (x1, y1);
2. координата курсора мыши после протягивания: (x2, y2);
3. координата центра красного блока: (x3, y3);
4. координата центра синего блока: (x4, y4);
Проблема 1 - как определить, можно двигать блок или нет?
Ответ 1.
Замечаем, что точки (x1, y1) и (x2, y2) - образуют линию L1 - это прямая траектория движения мыши.
А точки (x3, y3) и (x4, y4) - образуют линию L2 - это прямая траектория, по которой должен двигаться один из квадратов.
L1 имеет коэф. линейной функции k1, который вычисляется как k1 = ((y2 - y1) - b1) / (x2 - x1);
L2 имеет коэф. линейной функции k2, который вычисляется как k2 = ((y4 - y3) - b2) / (x4 - x3);
Но на самом деле, нас интересуют не эти коэф-ты, а дифференциалы, поэтому b1, b2 - постоянные коэф. можно откинуть:
d1 = (y2 - y1) / (x2 - x1);
d2 = (y4 - y3) / (x4 - x3).
Когда можно двигать блок?
Когда d1 ~ d2 c некоторой погрешностью r, то есть:
|d1 - d2| <= r1
Коэф. ошибки r1 будет больше, чем меньше (y2 - y1), (y4 - y3), (x2 - x1), (x4 - x3).
Коэф.-ты d1, d2 имеют невычисляемые случаи, когда x2 = x1, или когда x4 = x3, но строгости равенства трудно добиться, поэтому проверяем на коэф. ошибки малой величины r2.
(x2 - x1) <= r2 или (x4 - x3) <= r2.
Сначала проверяется возможность вычисляемости d1 и d2.
если они вычисляемые и критерий |d1 - d2| <= r1 выполняется, то блок двигать можно.
Если один из диф-лов не вычисляем, а другой - вычисляем, то блок двигать нельзя.
Если оба диф-лов невычисляемы, то если у (y2 - y1) и (y4 - y3) знак результата одинаков, то блок двигать можно.
Это только конец первого этапа, дальше вам пригодятся d1, d2 коэф.-ты, а также нужно вычислить интервал соприкосновения блоков, но эта уже другая история.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы