New to Kendo UI for jQuery? Download free 30-day trial

Drag and Drop on Existing Diagram Shapes

Environment

Product Progress Kendo UI Diagram for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I implement dragging and dropping on existing Kendo UI for jQuery Diagram shapes?

Solution

The following example demonstrates how to enable the dropping only of new shapes on existing ones in the Diagram.


    <script>
      $(function () {

        $("#splitter").kendoSplitter({
          panes: [
            { collapsible: true, size: "200px" },
            { collapsible: false, scrollable: false }
          ]
        });

        var diagram = $("#diagram").kendoDiagram({
          dataSource: {
            data: [{
              items: [{}, {}]
            }],
            schema: {
              model: {
                children: "items"
              }
            }
          },
          shapeDefaults: {
            width: 120,
            height: 120,
            fill: "#8ebc00"
          },
          layout: {
            type: "tree"
          }
        }).getKendoDiagram();


        $("#shapesPanelBar").kendoPanelBar({
          expandMode: "multiple"
        }).getKendoPanelBar();

        $("#shapesPanelBar").kendoDraggable({
          filter: ".shapeItem",
          hint: function (element) {
            return element.clone();
          }
        });

        $("#diagram").kendoDropTarget({
          drop: function (e) {
            if (e.draggable.hint) {                          
              var position = diagram.documentToModel({ x: e.pageX, y: e.pageY });
              var targetShape = shapeByPosition(position);
              if (targetShape) {
                var item = e.draggable.hint.data("shape");
                var newShape = diagram.addShape(item);
                diagram.connect(targetShape, newShape);
                diagram.layout(diagram.options.layout);
              }
            }
          }
        });

        function shapeByPosition(position) {
          var shapes = diagram.shapes;
          var shape;
          for (var idx = 0; idx < shapes.length; idx++) {
            shape = shapes[idx];
            if (shape.bounds().contains(position)) {
              return shape;
            }
          }
        }
      });
    </script>
    <div id="splitter">
      <div id="left-pane">
        <div class="pane-content">
          <ul id="shapesPanelBar">
            <li class="k-state-active">
              Basic Shapes
              <ul>
                <li>
                  <span class="shapeItem" data-shape='{"width":120,"height":120,"type":"rectangle"}' style="background-position: 0 0"></span>
                  <span>Square</span>
                </li><li>
                <span class="shapeItem" data-shape='{"type":"circle","width":120,"height":120}' style="background-position: -60px 0"></span>
                <span>Circle</span>
                </li><li>
                <span class="shapeItem" data-shape='{"width":120,"height":80,"type":"rectangle"}' style="background-position: -120px 0"></span>
                <span>Rectangle</span>
                </li><li>
                <span class="shapeItem" data-shape='{"type":"circle","width":120,"height":80}' style="background-position: -180px 0"></span>
                <span>Ellipse</span>
                </li>
              </ul>
            </li>
            <li class="k-state-active">
              Polygons
              <ul>
                <li>
                  <span class="shapeItem" data-shape='{"path":"M 60,0 L120,44 L97,114 L23,114 L0,44 z"}' style="background-position: -240px 0"></span>
                  <span>Pentagon</span>
                </li><li>
                <span class="shapeItem" data-shape='{"path":"m30,0 L90,0 L120,52 L90,104 L30,104 L0,52 z"}' style="background-position: -300px 0"></span>
                <span>Hexagon</span>
                </li><li>
                <span class="shapeItem" data-shape='{"path":"m60,0 L108.12,23.17 L120,75.24 L86.7,116.99 L33.3,116.99 L0,75.24 L11.88,23.17 z"}' style="background-position: -360px 0"></span>
                <span>Heptagon</span>
                </li><li>
                <span class="shapeItem" data-shape='{"path":"m35.15,0 L84.85,0 L120,35.15 L120,84.85 L84.85,120 L35.15,120 L0,84.85 L0,35.15 z"}' style="background-position: -420px 0"></span>
                <span>Octagon</span>
                </li>
              </ul>
            </li>
            <li class="k-state-active">
              Arrows
              <ul>
                <li>
                  <span class="shapeItem" data-shape='{"path":"m0,20 L20,0 L20,10 L120,10 L120,30 L20,30 L20,40 z"}' style="background-position: -480px 0"></span>
                  <span>45 degree</span>
                </li><li>
                <span class="shapeItem" data-shape='{"path":"m0,20 L11.5,0 L11.5,10 L120,10 L120,31 L11.5,31 L11.5,40 z"}' style="background-position: -540px 0"></span>
                <span>60 degree</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <div class="pane-content">
          <div id="diagram"></div>
        </div>
      </div>
    </div>

    <style>
      html, body, #splitter
      {
        height: 100%;
      }
      #shapesPanelBar .k-panel .k-state-hover,
      #shapesPanelBar .k-panel .k-state-selected
      {
        color: inherit;
        background: #fff;
      }

      #shapesPanelBar .k-panel .k-item
      {
        display: inline-block;
        width: 50%;
      }


      .shapeItem
      {
        margin-top: 10px;
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url("https://demos.telerik.com/kendo-ui/content/integration/diagram/images/diagram-toolbox.png");
        background-size: auto 100%;
      }

      #shapesPanelBar span
      {
        text-align: center;
        display: block;
      }
    </style>

See Also

In this article