How to Drag the Swimlane by Selecting the Lane in Vue Diagram?

In the Syncfusion® Vue Diagram component, a Swimlane represents the relationship between a business process and the responsible department. kindly refer the below documentation to know more about Swimlanes in Diagram

Documentation: Swimlanes In Diagram

By default, the Swimlane itself can be dragged by selecting its header, while individual lanes within the Swimlane can be swapped or reordered but not dragged directly. During the drag action, the Swimlane is moved using a helper object, which means that visually, the Swimlane appears to stay in its original position until the drag completes. Only upon releasing the mouse does the Swimlane’s new position update on the UI

To enable dragging of the entire Swimlane when a lane is dragged, you can use the positionChange event. This event allows you to monitor the drag event, detect the selected Swimlane element, and update its overall position according to the lane’s movement. By applying this approach, you can maintain flexible positioning and control over Swimlane movement based on lane interactions.

During the positionChange event Progress state, the code checks if a lane node is selected and, if so, retrieves its parent swimlane. The swimlane’s position (offsetX and offsetY) is then updated to match the dragged lane’s position, allowing it to move in sync. Once the drag action is Completed, the function iterates through all nodes to unselect them, preventing swimlane selection and ensuring that only the lane itself is selectable. This setup allows controlled movement of swimlanes without directly selecting them. Kindly refer to the sample and code - snippet below.

In this example, we have implemented dragging functionality for the Swimlane. It allows dragging the lane along with the Swimlane, either with or without the header.

Sample: Drag Swimlane using Lanes

Code snippet:

//Handles the drag event to update the swimlane's position and restrict selection.
positionChange:(args)=> {
   // Check if the drag state is in progress
  if (args.state == 'Progress') {
    var parent;
    // Check if there are selected nodes and if the first selected node is a lane
      if (diagramInstance.selectedItems.nodes.length > 0
        && (diagramInstance.selectedItems.nodes[0]).isLane
       && (diagramInstance.selectedItems.nodes[0]).parentId) {
          // Retrieve the swimlane (parent) object for the lane being dragged
                parent = diagramInstance.getObject((diagramInstance.selectedItems.nodes[0]).parentId);
        }
             // Update the swimlane’s position to follow the lane being dragged
       if (parent) {
              (parent).offsetX = (args.source).offsetX;
             (parent).offsetY = (args.source).offsetY;
       }
        // After dragging is completed, unselect all nodes to restrict swimlane selection
      } else if (args.state == 'Completed') {
            for (let i = 0; i < diagramInstance.nodes.length; i++) {
                  diagramInstance.unSelect(diagramInstance.nodes[i]);
            }
      }
}}
}

Conclusion
I hope you enjoyed learning how to drag the Swimlane by selecting the lane in Vue Diagram.

You can refer to our Vue Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!