Drag and resize

Dragging
In this tutorial we see how we can make the items of the diagram draggable and resizable. For the dragging-part jsPlumb provides us the draggable method. Make sure you give the element an absolute position in the style to work! We’ve seen this already in the introduction, so if you’ve commming from there you’ve seen the following example already:

Example

<style>.item { position: absolute; }</style>

<body>
  <div id="item_left" class="item"></div>

  <script>
    jsPlumb.ready(function() {
      jsPlumb.draggable("item_left");
    });
  </script>
</body>

Play with example »

Resizing
There’s no out of the box solution from jsPlumb you can use for resizing, but jQueryUI provides a method we can use to achieve this!

In the header we need to add the jquery-ui.css file. To apply the resizing to the divs, we use the resizable-method of jQueryUI. This alone resizes only the divs, but not the endpoints. To update them correctly when a resizing occures, we call the repaint-method of jsPlumb.

Example

<!DOCTYPE html>
<html ng-app="">
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <!-- Style of the divs goes here -->
</head>
<body>
    <div id="diagramContainer">
        <div id="item_left" class="item"><div>bla</div></div>
        <div id="item_right" class="item" style="left:150px;"></div>
    </div>

    <!-- Loading of the jsPlumb and jQuery js-libraries goes here -->
    
    <script>
        $(".item").resizable({ 
            resize : function(event, ui) {            
                jsPlumb.repaint(ui.helper);
            }
        });
 
        jsPlumb.ready(function() {           
                <!-- Initialization of the jsPlumb-items goes here -->
        });
    </script> 

Play with example »

Let’s make it even better!
Ok, we now have a diagram with draggable and resizable elements, but there are some things we can improve! Did you notice that we do not have a limit on the sides of the diagram? We can solve this by adding a containment when we make elements draggable. Another thing is, that jQueryUI makes not all edges resizable. In typical diagrams this was not the desired behavior. We can fix this by setting the handles-parameter. The following example implements these corrections:

Example

<script>
    $(".item").resizable({
    resize : function(event, ui) {            
            jsPlumb.repaint(ui.helper);
        },
        handles: "all"
    });

    jsPlumb.ready(function() {
            
    
    jsPlumb.connect({
        source:"item_left",
        target:"item_right",
            endpoint:"Rectangle"
        });
            
        jsPlumb.draggable("item_left", {containment:"parent"});
        jsPlumb.draggable("item_right", {containment:"parent"});
    });
</script> 

Play with example »