How to make paper draggable

Question

If the paper is too large for the displayed div, I would like to make the paper drag and drop.

I tried the docs: “arrows” and “pointer events”, but couldn't just follow the mousemovement. I also tried making the paper element draggable through jquery, but nothing like the trick ...

Is there any way to do this?

Answer 1

I suggest the following:

• register a paper handler blank:pointerdown event that triggers the drag and drop of paper (save the flag that you will use in your mousemove handler to find out that the paper is in a "pan" state).
• Put large paper in a <div> container with CSS overflow: auto . This <div> will be your little window for big paper.
• register a body mousemove event handler for the document (because you most likely want the paper to be dragged even if the mouse leaves the paper area?). In this handler, you will set the scrollLeft and scrollTop your <div> container, making the paper pan. To configure the scrollLeft and scrollTop you will use the clientX and clientY properties of the event object along with the same properties that were previously saved in your blank:pointerdown . (in other words, you need these to find the pan offset from the last mousemove / blank:pointerdown ).
• register a handler for the mouse of the document body and in this handler clear the drag and drop paper flag that you set in step 1.

Answer 2

I know this is a bit old stream, but I got stuck with it for a while and came across a neat solution using the SVG Pan and Zoom library. Git link hub here

EDIT . I created a plunger of the following steps (plus some additional features) here: SVG panning using Jointjs

The first step after creating the paper is to initialize the SVG Pan and Zoom:

  panAndZoom = svgPanZoom(targetElement.childNodes[0], { viewportSelector: targetElement.childNodes[0].childNodes[0], fit: false, zoomScaleSensitivity: 0.4, panEnabled: false }); 

Where targetElement is the div that got the collaboration paper in. Jointjs will create an SVG element in it (hence childNodes [0]), and inside this element the first element is the viewport tag (hence childNodes [0] .childNodes [0] in the viewportselector). At this point, the pan is turned off because in my case it will work with drag and drop elements on paper. Instead, I hold a reference to the panAndZoom object, and then turn the pan on and off in the empty field: pointerdown and blank: pointerup events:

 paper.on('blank:pointerdown', function (evt, x, y) { panAndZoom.enablePan(); }); paper.on('cell:pointerup blank:pointerup', function(cellView, event) { panAndZoom.disablePan(); 

});

Another way to solve the problem, I think, but I found it a little easier, plus it also gives you scale, and you can adjust the sensitivity, etc.

Answer 3

This can be achieved using a combination of JointJS events and document events. The graph display is encapsulated in a div :

 <div id='diagram'></div> 

Then add event handlers for JointJS, first the pointerdown event, where we save the initial drag position:

 paper.on('blank:pointerdown', function(event, x, y) { dragStartPosition = { x: x, y: y}; } ); 

Then the end of the drag and drop (pointerup), when we delete the variable, we save the position in (it also acts as a flag, whether active drag and drop):

 paper.on('cell:pointerup blank:pointerup', function(cellView, x, y) { delete dragStartPosition; }); 

Since JointJS does not raise the "move pointer to paper" event, we need to use the mousemove document mousemove . For example, using jQuery:

 $("#diagram") .mousemove(function(event) { if (dragStartPosition) paper.translate( event.offsetX - dragStartPosition.x, event.offsetY - dragStartPosition.y); }); 

We get the coordinates of the start of the drag and the current position of the pointer and update the paper position by calling paper.translate() .

WARNING: if you are scaling paper (using paper.scale() ), you must also scale the initial drag position:

 var scale = V(paper.viewport).scale(); dragStartPosition = { x: x * scale.sx, y: y * scale.sy}; 

After that, paper.translate() calls will be updated to the correct position.