Может ли перетаскиваемый пользовательский интерфейс jquery быть «осведомленным о положении» других элементов?

Question

Я реализую jquery UI dragggable и у меня есть 2 из этих dragggable, которые вы видите на связанной странице.Они, конечно, перетаскиваемы, поэтому я могу перемещать их по мере необходимости.

Как бы я заставил их узнать друг о друге, чтобы я мог попытаться заставить их выравниваться или показывать метки выравнивания, когда во время перетаскивания они получат те же x или y, что и другой перетаскиваемый объект?

Answer 1

Звучит как забавная проблема.

Думаю, я бы установил общую контрольную точку и измерил бы их расстояние друг от друга, используя эту точку для триангуляции.

Например.Вы можете использовать верхнюю левую часть страницы в качестве ориентира ... пусть elementa и elementb - это div, которые вы сравниваете.function getDistance () {var aPos = $ ("# elementa"). offset ();var bPos = $ ("# elementb"). offset ();

// distance of a to b:
//y = (y2-y1)
//x = (x2-x1)
var xa = aPos.left;
var xb = bPos.left;

var ya = aPos.top;
var yb = bPos.top;

//vector from point a to b:
x = xa-xb;
y = ya-yb;

// length of the vector (distance from div a to b)
return Math.sqrt(x*x + y*y);

}

Если вы хотите получить позицию во время перетаскивания, вы можете использовать обертку: http://jsbin.com/etako/edit

или зарегистрируйте позицию как: $ (this) .data ('draggable'). Offset.click.top - = x

Answer 2

Хороший вопрос.

Сначала необходимо создать список следующих данных для каждого перетаскиваемого объекта:

• Позиция X
• Положение Y
• Высота
• Ширина

При определении объектов как перетаскиваемых вы можете привязать обратный вызов к событию «перетаскивания». Это событие срабатывает, если перетаскиваемый объект перемещается на 1 пиксель. Это означает, что этот обратный вызов будет называться много, поэтому важно сохранить вычисления минимальными.

При вызове обратного вызова вам будут предоставлены объекты пользовательского интерфейса и события. Объект пользовательского интерфейса будет содержать ценные данные о позициях X и Y на перетаскивании.

Имея размеры и положение перетаскивания и других перетаскиваемых объектов, вы можете легко вычислить близость к его братьям и действовать соответственно. Имея доступные данные, вы сможете реализовать математику Акеллехе.

Прежде чем я забуду, вы должны пересчитать список позиций в событии перетаскиваемой остановки.

Редактировать: проверьте следующую ссылку на draggable содержит документацию о перетаскиваемых событиях, методах и значениях.