Support drag n drop elements inside panzoom

[Stettinum]

Is there any chance to add support for draggable and droppable elements inside panzoom ?

[anvaka]

Interesting idea. Let's explore this. How would you define an element to be draggable? What would be a droppable marker?

[Stettinum]

@anvaka basically we can detect if element is draggable by class that element has.

I've created a workaround for my usage in that way. I use jquery draggable ui. First i assign panzoom to variable :

      _self.panzoom = panzoom(area, {
           zoomSpeed: 0.03,
       });

and in drag method on start i call dispose method from panzoom and on stop i call recreate method

     $(elem).draggable({
        drag: function ( event, ui ) {
        },
        start: function ( event, ui ) {
            _self.panzoom.dispose();
        },
        stop: function (event , ui) {
          _self.panzoom.recreate();
        }
      });

my recrate method in panzzom looks like:

    function recreate() {

      owner.addEventListener('mousedown', onMouseDown)
      owner.addEventListener('touchstart', onTouch)
      owner.addEventListener('keydown', onKeyDown)
      wheel.addWheelListener(owner, onMouseWheel)

      smoothScroll.start()

      triggerPanStart();
    }

of course recreate should be returned inside createPanZoom method

and it works like a charm. if i start dragging, panzoom is disabled and when i stop, panzoom is enabled. I realize that is not 'clean' solution but it works.

So in first version of drag n drop inside panzoom you can add recrate method and also add to documentation how can it be resolve with drag and drop ( by dispose on start drag and recreate by stop)

Greetings

[storewaladotcom]

@Stettinum could you share the entire code snippet for your workaround please?

[shturmavik]

Here you are

https://codepen.io/Shturmavik/pen/zYqxaaP