cliffordfajardo/css_grid_draggable.html

## css_grid_draggable.html
<html>
  <head>
    <title>grid</title>
    <style>
      body {padding: 0; margin: 0;}
      .container {
        display: grid;
        grid-template-rows: 200px repeat(4, 100px);
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "header header header header"
                             "sidebar main main main"
                             "sidebar main main main"
                             "sidebar main main main"
                             "footer footer footer footer"
      }
      .one {
        grid-area: header;
        background: yellow;
      }
      .two {
        grid-area: sidebar;
        background: aqua;
      }
      .three {
        grid-area: main;
        background: red;
      }
      .four {
        grid-area: footer;
        background: green;
      }
      .five {
        background: pink;
      }
      .six {
        background: brown;
      }
      .dragging {
        border: dashed gray 1px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="editable one" id="one">
        one
      </div>
      <div class="editable two">Two</div>
      <div class="editable three" id="three">Three</div>
      <div class="editable four">Four</div>
      <div class="editable five">Five</div>
      <div class="editable six">Six</div>
    </div>
    <script>
      function dragStart(ev) {
        ev.target.classList.add('dragging')
        ev.dataTransfer.setData("text/plain", ev.target.id);
        ev.dataTransfer.dropEffect = "copy";
      }
      function drop(ev) {
        ev.preventDefault();
        var draggableId = ev.dataTransfer.getData("text");
        var droppable = ev.currentTarget;
        var draggable = document.getElementById(draggableId)
        draggable.classList.remove('dragging')
        var droppableArea = window.getComputedStyle(droppable).gridArea;
        var draggableArea = window.getComputedStyle(draggable).gridArea;
        draggable.style.gridArea = droppableArea;
        droppable.style.gridArea = draggableArea;
        console.log(draggable.id, '====>', droppableArea)
        console.log(droppable.id, '====>', draggableArea)
      }
      function dragover(ev) {
        ev.preventDefault();
      }

      function setup() {
        var els = document.getElementsByClassName("editable");
        var c = 1;
        Array.prototype.forEach.call(els, function (e) {
          e.draggable = true
          e.ondragstart = dragStart
          e.ondrop = drop
          e.ondragover = dragover
          if(e.id == "") {
            e.id = "_editable_" + c;
            c++
          }
        })
      }

      setup()
    </script>
  </body>
</html>
	<html>
	<head>
	<title>grid</title>
	<style>
	body {padding: 0; margin: 0;}
	.container {
	display: grid;
	grid-template-rows: 200px repeat(4, 100px);
	grid-template-columns: repeat(4, 1fr);
	grid-template-areas: "header header header header"
	"sidebar main main main"
	"sidebar main main main"
	"sidebar main main main"
	"footer footer footer footer"
	}
	.one {
	grid-area: header;
	background: yellow;
	}
	.two {
	grid-area: sidebar;
	background: aqua;
	}
	.three {
	grid-area: main;
	background: red;
	}
	.four {
	grid-area: footer;
	background: green;
	}
	.five {
	background: pink;
	}
	.six {
	background: brown;
	}
	.dragging {
	border: dashed gray 1px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="editable one" id="one">
	one
	</div>
	<div class="editable two">Two</div>
	<div class="editable three" id="three">Three</div>
	<div class="editable four">Four</div>
	<div class="editable five">Five</div>
	<div class="editable six">Six</div>
	</div>
	<script>
	function dragStart(ev) {
	ev.target.classList.add('dragging')
	ev.dataTransfer.setData("text/plain", ev.target.id);
	ev.dataTransfer.dropEffect = "copy";
	}
	function drop(ev) {
	ev.preventDefault();
	var draggableId = ev.dataTransfer.getData("text");
	var droppable = ev.currentTarget;
	var draggable = document.getElementById(draggableId)
	draggable.classList.remove('dragging')
	var droppableArea = window.getComputedStyle(droppable).gridArea;
	var draggableArea = window.getComputedStyle(draggable).gridArea;
	draggable.style.gridArea = droppableArea;
	droppable.style.gridArea = draggableArea;
	console.log(draggable.id, '====>', droppableArea)
	console.log(droppable.id, '====>', draggableArea)
	}
	function dragover(ev) {
	ev.preventDefault();
	}

	function setup() {
	var els = document.getElementsByClassName("editable");
	var c = 1;
	Array.prototype.forEach.call(els, function (e) {
	e.draggable = true
	e.ondragstart = dragStart
	e.ondrop = drop
	e.ondragover = dragover
	if(e.id == "") {
	e.id = "_editable_" + c;
	c++
	}
	})
	}

	setup()
	</script>
	</body>
	</html>