JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

  <!-- <img src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> -->

<form method="get" action="/search.php" id="search" draggable="true" ondragstart="drag(event)">
    <input type="text" id="searchbox" value="" placeholder="search" size="20" name="query">
    <input type="hidden" value="1" name="search">
    <input type="submit" value="" id="add">
</form>

<ul id="imagegalley" draggable="true" ondragstart="drag(event)">
  <li>
    <img src="IMG">
  </li>
  <li>
    <img src="IMG">
  </li>
  <li>
    <img src="IMG">
  </li>
  <li>
    <img src="IMG">
  </li>
  <li>
    <img src="IMG">
  </li>
</ul>

</div>

<article id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></article>

CSS

#div2 {
  float: left;
  width: 750px;
  height: 100%;
  margin: 0px auto;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#div1 {
  border-left: 1px solid #CCCCCC;
  background-color: #F9F9F9;
  position: absolute;
  padding: 25px;
  right: 0px;
  height: auto;
  min-height: 100%;
  max-height: 100%;
}

#imagegalley {
  border: 1px solid #CCCCCC;
  background-color: #454545;
}

JavaScript

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");
    ev.target.appendChild(document.getElementById(data));
}