drag bind/unbind

by alfredopacino

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.draggable.min.js"></script>

<input type="checkbox" id="checkbox"> EnableDrag
<button onclick="toggleDrag()">
start
</button>

JavaScript

var draw = SVG().addTo('body').size(500, 500)
var rect = draw.rect(100, 100).attr({ fill: 'grey' })
var startDragX,endDragX;


function toggleDrag() {
	alert(1)

  if (document.querySelector("#checkbox").checked) {
    rect.draggable(false);
    rect.draggable();

    rect.on("dragstart", e => {
    	startDragX = e.detail.event.offsetX
      console.log("dragstart", startDragX)
    });

    rect.on("dragend", e => {
      endDragX = e.detail.event.offsetX

      console.log("dragend", endDragX)
      const delta = startDragX-endDragX;
      console.log("delta", delta)
    });

    rect.on("dragmove", e => {
      const {handler, box} = e.detail;
      e.preventDefault();
      handler.move(box.x, null);
    });
  } else {
    rect.draggable(false);
    rect.off("dragstart")
    rect.off("dragend")
  }
}