Drag Drop Feature and Arrow Map

Question

Я намереваюсь сделать блок-схему, которая по возможности будет использовать функцию перетаскивания, такую ​​как перетащить ромб, овал, алмазную коробку и т. Д. И стрелки, которые могут их соединить.

Может кто-нибудь пожалуйста, предложить надлежащий язык для начала, которые могут поддерживать такие функции, как определение объектов для прямоугольных, стрелки, и есть отображение, так что я знаю, конкретная стрелка указывает на прямоугольник с ID АБВ ....

Я помещаю этот вопрос с помощью jquery, javascript, actionscript ... некоторых библиотек, которые я знаю по имени не технической экспертизой, если в случае, если они поддерживают то, что я ищу.

Просьба предложить.

Answer 1

Это означает, в качестве отправной точки: http://jsfiddle.net/Qgt9V/2/

$(".box-handle").draggable({ 
    containment: ".container", 
    scroll: false, 
    drag: function() { /* While dragging check for stuff */ 

     var box = $(this); 
     var boxPosition = box.position(); 
     box.find('.arrow').show(); 

     if (boxPosition.left >= 90) 
     { 
      // In the parent div called ".box" find ".box-line" 
      box.closest('.box').find('.box-line').css({ 
       'top':'50px', /* Put top left corner of ".box-line" a the edge of ".static" */ 
       'left':'110px', 
       'width': boxPosition.left - 60, /* Put bottom right corner of ".box-line" a the edge of current dragged box */ 
       'height': boxPosition.top + 50, 
       'border':'none', 
       'border-top':'1px solid #bfbfbf', 
       'border-right':'1px solid #bfbfbf' 
      }); 
      /* place the arrow*/ 
      box.find('.arrow').css({ 
       'top':'-10px', 
       'left':'45px' 
      }); 
     } 
     else if (boxPosition.left < 90) 
     { 
      box.closest('.box').find('.box-line').css({ 
       'top':'110px', 
       'left':'50px', 
       'width': boxPosition.left, 
       'height': boxPosition.top - 60, 
       'border':'none', 
       'border-left':'1px solid #bfbfbf', 
       'border-bottom':'1px solid #bfbfbf' 
      }); 
      box.find('.arrow').css({ 
       'top':'45px', 
       'left':'-10px' 
      }); 
     } 
    } 
}); 

Я использую JQuery UI перемещаемый для перемещения DIV вокруг. При перемещении div «box-line» изменяет размеры в соответствии с положением окна, которое я перетаскиваю. Тогда это просто вопрос добавления границ в правильную сторону «box-line».

• More about draggable.
• Также посмотрите на position и/или offset методов.

Answer 2

См. Также this question, в котором приведены ссылки JsPlumb.

В издание инструментария входит перетаскивание в редакцию сообщества и на самом деле имеет demo flowchart app в (очень дорогостоящем) выпуске инструментальных средств.

Фактически публикация сообщества полностью отвечает на ваш вопрос. Взгляните на perimeter anchors demo.