drag redraw

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>

<div id="svg"></div>
<input type="text" id="log" />

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

JavaScript

var startDragX,endDragX, rect;
 
var draw = SVG().addTo('#svg').size(500, 250)

render()

function render(pos = 50) {
	if (rect) {
  	rect.draggable(false);
    rect.off("dragstart");
    rect.off("dragend");
    draw.clear();            
  } else {
  
  }
  
		rect = draw.rect(100, 100).attr({ fill: 'grey' }).dx(pos)
  	toggleDrag()
	
}

function toggleDrag() {

  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)
      render(endDragX)
    });

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