. tg_KONVA

https://konvajs.org/

.1 tg_drag drop.js

const stage = new Konva.Stage({
  width: window.innerWidth,
  height: window.innerHeight,
  container: 'container'
});

const layer = new Konva.Layer();
stage.add(layer);

/* rects */
var rects = new Konva.Group();
/* let origInit = (rect) => {
  rect.origX = rect.x
  rect.origY = rect.y
}; */

const baseRect = new Konva.Rect({
	x: 99,
  y: 99,
  width: 100,
  height: 50,
  /* fill: 'red', */
  stroke: 'black',
  strokeWidth: 1,
  draggable: true
});


rects.add(baseRect.clone({x:1, y:1, origX:1, origY:1}))
rects.add(baseRect.clone({x:1, y:61, origX:1, origY:61}))

/* add the dropzone */
const dropZone = baseRect.clone({x:200, y:10, width: 500, height:500, draggable: false})
layer.add(dropZone)


layer.add(rects);
layer.draw();

/* */

function isInDropZone(node) {
	if (node.getAttr("x") > dropZone.getAttr("x") && 
  		node.getAttr("x") + node.getAttr("width") < dropZone.getAttr("x") + dropZone.getAttr("width") &&
      node.getAttr("y") > dropZone.getAttr("y") && 
  		node.getAttr("y") + node.getAttr("height") < dropZone.getAttr("y") + dropZone.getAttr("height")
      ) return true
  else return false
}

rects.on('dragend', (e) => {
	/* console.log('dragend ', e) */;
  
  let node = e.target
  
  if (!isInDropZone(node)) {
    node.to({ x: node.getAttr("origX"), y: node.getAttr("origY")})
  } 
  else {
  	node.setAttr("origX", node.getAttr("x"))
    node.setAttr("origY", node.getAttr("y"))
  }
});