Ik heb een script op het internet gevonden die ik graag wil gebruiken.
Het gaat om het verbinden van divs.

Wat ik begrijp uit het javascript is dat de verbonden divs opgeslagen worden in de _lines
Kan iemand me vertellen hoe ik dat na een submit terug kan krijgen in een array in php?




<form id="form1" name="form1" method="post">
   
<div id="parentNodes_11">
	<div class="nodes">
		<div class="group1">
			<div class="node">auto<span class="node1" data-connect="false" data-id="0" data-use="false"></span></div>
			<div class="node">fiets <span class="node2" data-connect="false" data-id="1" data-use="false"></span></div>
			<div class="node">water <span class="node3" data-connect="false" data-id="2" data-use="false"></span></div>
			<div class="node">zwem <span class="node4" data-connect="false" data-id="3" data-use="false"></span></div>
		</div>
		<div class="group2">
			<div class="node">broek <span class="node5" data-connect="false" data-id="0" data-use="false"></span></div>
			<div class="node">band <span class="node6" data-connect="false" data-id="1" data-use="false"></span></div>
			<div class="node">wiel <span class="node7" data-connect="false" data-id="2" data-use="false"></span></div>
			<div class="node">kraan <span class="node8" data-connect="false" data-id="3" data-use="false"></span></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>

<input name="submit" type="submit" id="submit" formmethod="POST" value="Verzenden">
</form>


  
  <script type="text/javascript">
   (function($) {
      $.fn.connect = function(param) {
        var _canvas;
        var _ctx;
        var _lines = new Array(); //This array will store all lines (option)
        var _me = this;
        var _parent = param || document;
        var _lengthLines = $(_parent + ' .group1 .node').length;
        var _selectFirst = null;
        //Initialize Canvas object

        _canvas = $('<canvas/>')
          .attr('width', $(_me).width())
          .attr('height', $(_me).height())
          .css('position', 'absolute');
        $(_parent).prepend(_canvas);
        //$(_canvas).insertBefore(_parent);
        this.drawLine = function(option) {
          //It will push line to array.
          _lines.push(option);
          this.connect(option);

        };

....... het javascript gaat hier verder



<script type="text/javascript">
	$(document).ready(function() {
	$('#parentNodes_11 .nodes').connect('#parentNodes_11');
});
  </script>

Wat ik eerder al aangaf is dat de canvas wordt aangemaakt als child van div#parentNode_11, in de element inspector zie na het laden van de pagina:

<div id="parentNodes_11" class="parent">
	<canvas width="300" height="112" style="position: absolute;"></canvas>
	….. . . 
</div>

Zoals je ziet heb ik in mijn test de class parent toegevoegd (voor het geval je meerdere blokken wilt maken):

.parent {
	width: 300px;
	margin: auto;
	margin-top: 1.5em;
	overflow: hidden;
}

Overigens (maar wel belangrijk) heb ik de code in mijn vorige reactie, waar de coördinaten van de lijnen worden bepaald, aangepast met een correctie op de y-waarde.
Ik begrijp dan niet wat ik fout doe.
Ik heb de class toegevoegd en de html aangepast, maar de y-as klopt de verbinding niet.

Ook heb ik het stukje javascript aangepast.


<form id="form1" name="form1" method="post">
<div id="parentNodes_11"  class="parent">
	<canvas width="300" height="112" style="position: absolute;"></canvas>
	<div class="nodes">
		<div class="group1">
			<div class="node">auto<span class="node1" data-connect="false" data-id="0" data-use="false" data-connected-to=""></span></div>
			<div class="node">fiets <span class="node2" data-connect="false" data-id="1" data-use="false" data-connected-to=""></span></div>
			<div class="node">water <span class="node3" data-connect="false" data-id="2" data-use="false" data-connected-to=""></span></div>
			<div class="node">zwem <span class="node4" data-connect="false" data-id="3" data-use="false" data-connected-to=""></span></div>
		</div>
		<div class="group2">
			<div class="node">broek <span class="node5" data-connect="false" data-id="0" data-use="false"></span></div>
			<div class="node">band <span class="node6" data-connect="false" data-id="1" data-use="false"></span></div>
			<div class="node">wiel <span class="node7" data-connect="false" data-id="2" data-use="false"></span></div>
			<div class="node">kraan <span class="node8" data-connect="false" data-id="3" data-use="false"></span></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<input name="submit" type="submit" id="submit" formmethod="POST" value="Verzenden">
<input name="_lines" type="hidden" id="_lines">
</form>




Zoals je ziet staat de lijn te laag.
Als ik de margin-top: 1.5em; even weghaal staat de lijn wel goed.
Heb ik dan toch iets vergeten in het javascript aan te passen?
Ger van Steenderen op 26/05/2020 11:47:01

Overigens (maar wel belangrijk) heb ik de code in mijn vorige reactie, waar de coördinaten van de lijnen worden bepaald, aangepast met een correctie op de y-waarde.

Wellicht heb je dit over het hoofd gezien.
Voor de volledigheid het aangepaste javascript:

_top_node = _left_node.parent().parent().parent().parent();
			_adj_x = _top_node.offset().left;
			_adj_y = _top_node.offset().top;
            //Get Left point and Right Point
            _left.x = _left_node.offset().left + _left_node.outerWidth()-_adj_x;
            _left.y = _left_node.offset().top + (_left_node.outerHeight() / 2)-_adj_y;
            _right.x = _right_node.offset().left-_adj_x;
            _right.y = _right_node.offset().top + (_right_node.outerHeight() / 2)-_adj_y;

Hmmm bijzonder...
Ik had dat stukje inderdaad vervangen, dus nogmaals eroverheen geplakt en nu werkt het perfect.
Ik was blijkbaar toch iets ervan vergeten.

Super bedankt Ger, zo kan ik weer verder. :)

Reageren