Как создать алгоритмическую функцию Javascript / Jquery, которая будет рассчитывать нагрузку и перерисовывать во время mousedrag? - PullRequest
Новая
       7

Как создать алгоритмическую функцию Javascript / Jquery, которая будет рассчитывать нагрузку и перерисовывать во время mousedrag?

3 голосов
/ 27 января 2011

Я начал разработку веб-приложения, и сейчас я решаю некоторые из первых интерфейсных препятствий.Сначала я дам вам некоторые подробности о внешнем интерфейсе, просто чтобы убедиться, что контекст моего вопроса ясен.

** Ниже приведена диаграмма, показывающая различные элементы, относящиеся к вопросу. * enter image description here

Каждый Node можно перетаскивать.Если хотите, быстро взгляните на http://labs.inversepenguin.com, чтобы просмотреть тест canvas с одним активным node.

Примечания к диаграмме:

* 1016Положение *Node 2 на рисунке 2 изменилось по сравнению с положением на рисунке 1, в результате чего отображается дополнительный link.Моя цель состоит в том, чтобы вновь созданный link появился в тот момент, когда node2 был перетащен на необходимое расстояние ... в отличие от того, после того как пользователь сбросил node2.

«Как создать алгоритмическую функцию Javascript / Jquery, которая будет рассчитывать нагрузку и перерисовывать во время mousedrag?»

Желаемая функция будет состоятьиз:

  • Алгоритм для анализа расстояния между nodes, чтобы определить, сколько links должно быть отображено.

  • Создать / уничтожитьlinks на основе результатов.

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

Я уверен в своих способностях геометрии и математики, чтобы справиться с выполнением функции - но я не уверен, как сделать функцию"listen" и "re-draw" во время mousedrag.

Я, возможно, подумал, может быть, сам вызов функции завершается после if проверки, чтобы убедиться, что пользователь«все еще тянет», но я новичок в программировании и не совсем разбираюсь в том, что практично.

Заранее спасибо за любую помощь!

Ответы [ 2 ]

2 голосов
/ 27 января 2011

Если вы все равно хотите использовать jQuery, я бы порекомендовал использовать перетаскиваемость в jQuery UI . Это позволяет легко перетаскивать элементы, а также привязывать пользовательскую функцию к событию drag. Затем эта функция вызывается всякий раз, когда пользователь перемещает свою мышь при перетаскивании элемента, поэтому ее можно использовать для обновления «ссылок».

Конечно, вы также можете привязать ту же функцию к событию загрузки страницы, чтобы создать начальные "ссылки".

1 голос
/ 27 января 2011

Если вы используете Jquery UI для перетаскивания, вы можете определить события start, drag или stop для выполнения соответствующей работы.

$( ".selector" ).bind( "dragstart", function(event, ui) {
  ...
});

$( ".selector" ).bind( "drag", function(event, ui) {
  ...
});

$( ".selector" ).bind( "dragstop", function(event, ui) {
  ...
});

Проблема, которую я вижу, состоит в том, что каждый узел должен знать, что с ним связано.Я делал это раньше, создавая свои собственные атрибуты.Используя приведенное выше решение для двух узлов: 

<div id="node1" child="node2" />
<div id="node2" parent="node1" />

Если у вас есть узлы, связанные с несколькими другими узлами, вы можете просто сделать что-то вроде 

<div id="node1" children="node2;node3;node4" />

со списком детей с разделителями.Тогда получение этой информации для вашей обработки будет так же просто, как var children = $(this).attr('children').split(';');, и вы получите массив идентификаторов детей.Вы также можете узнать положение элемента и дочерних элементов, рассчитать расстояние и изменить ссылки.

...