Создание веб-карты булавки на доске объявлений с использованием JQuery; drag/drop/collisions/etc

Question

голый со мной, когда я начинаю свое приключение, но мне нужна помощь, поскольку я довольно новичок в JQuery (Javascript и программирование в целом.)

Я ищу для создания так называемая «доска объявлений», основанная на веб-интерфейсе, где пользователь может создавать/удалять/перетаскивать/удалять «контакты», не допуская совпадения «контактов».

Вот диаграмма, которая должна помочь проиллюстрировать то, что я пытаюсь создать:

• «булавки» созданы, вероятно, на двойной щелчок; они будут запрашивать у пользователя ярлык.
• «контакты» не могут пересекаться; (окончательная форма будет больше, больше oval like.)
• «контакты» должны быть способны «подключиться» к другим «контактам» с визуальным элементом (то есть пунктирной линией), но не все контакты будут быть «связанными».

Я нашел GameQuery который якобы поддерживает ограничивающие столкновения окна - но это за важный, что столкновения будут обнаружены с овалами, а не коробки (я знаю, что в приведенном выше примере можно предположить, в противном случае, но это всего лишь диаграмма ... не макет предполагаемой окончательной конструкции.)

«Штыри» могут также варьироваться в зависимости от размера этикетки ... это также следует учитывать Я полагаю, чтобы обеспечить благоприятный подход ко всем переменным UX.

Я нашел Quadtree и Collision Detection вместе с этим GameQuery collision demo, но все это выглядит немного как тарабарщина. Я ищу, чтобы его указали в правильном направлении,, так что я знаю, что какой метод я вкладываю в свое время, будет работать для моего желаемого результата ... вместо того, чтобы разрушать мои шарики, вычисляя Quadtree и GameQuery, например , просто чтобы найти это, они не будут работать для этого проекта.

...

Кроме того, если какие-либо опытные разработчики готовы быть наставником для меня в этом проекте - я готов предложить свой чрезвычайно изысканный опыт проектирования, для некоторых «Мне нужна помощь» вопросы по пути.

EDIT: Возможно, лучший вопрос может быть ... как я могу применить односторонний многоугольник в ранее существовавших функциональных ограничениях GameQuery? Он не должен быть идеальным кругом, но по крайней мере 8-сторонним ...

Answer 1

Я не думаю, что ваша проблема на самом деле связана с jQuery или даже с Javascript вообще. Ваша проблема в том, как определить, когда эллипс перекрывает (или не перекрывает) другой эллипс? Это математическая проблема, и это one that has already been asked here.

Будьте предупреждены, что это поражает меня как довольно сложную проблему для тех, кто новичок в программировании. Я совсем не новичок в программировании, и я считаю это сложным, особенно с вашими другими требованиями - перетаскивание и т. Д. Вы столкнулись с довольно сложной проблемой, и в этот момент все, что вы можете сделать для упрощения (например, использование ограничивающих полей), я бы настоятельно рекомендовал сделать.