michimani/draggable_block_sample.html

## draggable_block_sample.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Draggable Block Test</title>
  <style>
    .outer-block {
      position: relative;
      width: 100%;
      height: 100%;
    }
    #draggable-block {
      border: 1px solid #A3A0A2;
      display: block;
      left: 0px;
      margin: 10px 0px;
      padding: 10px;
      position: absolute;
      top: 0px;
      width: 600px;
      height: 600px;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      /* Required to make elements draggable in old WebKit */
      /* -khtml-user-drag: element;
      -webkit-user-drag: element; */
    }
    #draggable-block.draggable {
      border: 3px solid #00ff00;
    }
    #draggable-block.draggable:hover {
      cursor: move;
    }
  </style>
</head>
<body>
  <h1>Draggable Block Test</h1>
  <button id="toggle-draggable-btn">To Enable</button>
  <div class="outer-block">
    <div id="draggable-block">
      <p>This is a draggable div block.</p>
    </div>
  </div>

  <script>
    const draggableBlock = document.getElementById('draggable-block');
    var isEnable = false;
    var blockPos = {x: 0, y: 0};
    var isDragging = false;
    document.getElementById('toggle-draggable-btn').addEventListener('click', (btnElem) => {
      isEnable = !isEnable;
      if (isEnable === true) {
        enableDrag();
        btnElem.target.innerHTML = 'To Disabled';
      } else {
        disableDrag();
        btnElem.target.innerHTML = 'To Enabled';
      }
    });
    enableDrag = () => {
      draggableBlock.classList.add('draggable');
      const draggableBlocks = document.querySelectorAll('#draggable-block.draggable');
      [].forEach.call(draggableBlocks, function(block) {
        block.addEventListener('mousedown', (elem) => {
          const startX = elem.clientX;
          const startY = elem.clientY;
          const initialPosX = blockPos.x;
          const initialPosY = blockPos.y;
          console.log(`initial::(${initialPosX}, ${initialPosY})`);
          isDragging = true;
          elem.target.addEventListener('mousemove', (dragedElem) => {
            if (isDragging !== true) {
              return;
            }
            if (!dragedElem.path.some((p) => p.id === 'draggable-block' && p.className === 'draggable') || elem.type !== 'mousedown') {
              return;
            }
            if (typeof dragedElem.clientX === 'undefined' || typeof dragedElem.clientY === 'undefined') {
              return;
            } else if (dragedElem.clientX === 0 && dragedElem.clientY === 0) {
              return;
            }
            console.log(dragedElem);
            blockPos.x = initialPosX + dragedElem.clientX - startX;
            blockPos.y = initialPosY + dragedElem.clientY - startY;
            changePos();
          });
        }, false);
        document.addEventListener('mouseup', (elem) => {
          isDragging = false;
        }, false);
      });
    }
    disableDrag = () => {
      const draggableBlocks = document.querySelectorAll('#draggable-block.draggable');
      [].forEach.call(draggableBlocks, function(block) {
        block.removeEventListener('dragstart', () => {});
        block.removeEventListener('drag', () => {});
      });
      draggableBlock.classList.remove('draggable');
    }
    changePos = () => {
      draggableBlock.style.top = `${blockPos.y}px`;
      draggableBlock.style.left = `${blockPos.x}px`;
      console.log(`changed::(${blockPos.x}, ${blockPos.y})`);
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Draggable Block Test</title>
	<style>
	.outer-block {
	position: relative;
	width: 100%;
	height: 100%;
	}
	#draggable-block {
	border: 1px solid #A3A0A2;
	display: block;
	left: 0px;
	margin: 10px 0px;
	padding: 10px;
	position: absolute;
	top: 0px;
	width: 600px;
	height: 600px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	/* -khtml-user-drag: element;
	-webkit-user-drag: element; */
	}
	#draggable-block.draggable {
	border: 3px solid #00ff00;
	}
	#draggable-block.draggable:hover {
	cursor: move;
	}
	</style>
	</head>
	<body>
	<h1>Draggable Block Test</h1>
	<button id="toggle-draggable-btn">To Enable</button>
	<div class="outer-block">
	<div id="draggable-block">
	<p>This is a draggable div block.</p>
	</div>
	</div>

	<script>
	const draggableBlock = document.getElementById('draggable-block');
	var isEnable = false;
	var blockPos = {x: 0, y: 0};
	var isDragging = false;
	document.getElementById('toggle-draggable-btn').addEventListener('click', (btnElem) => {
	isEnable = !isEnable;
	if (isEnable === true) {
	enableDrag();
	btnElem.target.innerHTML = 'To Disabled';
	} else {
	disableDrag();
	btnElem.target.innerHTML = 'To Enabled';
	}
	});
	enableDrag = () => {
	draggableBlock.classList.add('draggable');
	const draggableBlocks = document.querySelectorAll('#draggable-block.draggable');
	[].forEach.call(draggableBlocks, function(block) {
	block.addEventListener('mousedown', (elem) => {
	const startX = elem.clientX;
	const startY = elem.clientY;
	const initialPosX = blockPos.x;
	const initialPosY = blockPos.y;
	console.log(`initial::(${initialPosX}, ${initialPosY})`);
	isDragging = true;
	elem.target.addEventListener('mousemove', (dragedElem) => {
	if (isDragging !== true) {
	return;
	}
	if (!dragedElem.path.some((p) => p.id === 'draggable-block' && p.className === 'draggable') \|\| elem.type !== 'mousedown') {
	return;
	}
	if (typeof dragedElem.clientX === 'undefined' \|\| typeof dragedElem.clientY === 'undefined') {
	return;
	} else if (dragedElem.clientX === 0 && dragedElem.clientY === 0) {
	return;
	}
	console.log(dragedElem);
	blockPos.x = initialPosX + dragedElem.clientX - startX;
	blockPos.y = initialPosY + dragedElem.clientY - startY;
	changePos();
	});
	}, false);
	document.addEventListener('mouseup', (elem) => {
	isDragging = false;
	}, false);
	});
	}
	disableDrag = () => {
	const draggableBlocks = document.querySelectorAll('#draggable-block.draggable');
	[].forEach.call(draggableBlocks, function(block) {
	block.removeEventListener('dragstart', () => {});
	block.removeEventListener('drag', () => {});
	});
	draggableBlock.classList.remove('draggable');
	}
	changePos = () => {
	draggableBlock.style.top = `${blockPos.y}px`;
	draggableBlock.style.left = `${blockPos.x}px`;
	console.log(`changed::(${blockPos.x}, ${blockPos.y})`);
	}
	</script>
	</body>
	</html>