React Dnd

by John Kiran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery.js"></script>
<div class="">
  <div class="col-md-3 col-sm-3">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Drag From Here</h3>
        
      </div>
      <div class="panel-body">
        <ul class="list-group">
          <li draggable="true" class="list-group-item ">division</li>
          <li draggable="true" class=" list-group-item ">button</li>
          <li draggable="true" class="list-group-item ">input</li>
          <li draggable="true" class="list-group-item ">textarea</li>
        </ul>
      </div>
    </div>
  </div>


  <div class="col-md-9 col-sm-9">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Drop in Container Below</h3>
        <button id="clear">Clear Canvas</button>
      </div>
      <div class="panel-body dropContainer">
        <div id='dropZone' class="dropzone">
          <div id="innerDropZone" class="innerDropZone"></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.ol {
       margin-top: 50px;
       float: left;
       width: 200px;
       height: 300px;
       border: solid 1px #CCC;
       background: gray;
     }
     
     #clear {
       background: red;
       font-weight: bold;
       float: right;
     }
     
     h3 {
       display: inline;
     }
     
     [draggable] {
       background: #EEE;
       padding: 10px;
       margin: 20px;
     }
     
     .dropContainer {
       background: #EEE;
     }
     
     .dropzone {
       margin-top: 10px;
       min-height: 300px;
       background: white;
       border: dotted 1px gray;
       border-radius: 5px;
     }
     
     .innerDropZone {
       height: 50px;
       border: solid 0px white;
       background: white;
       padding: 15px;
       margin: 10px 30px 0px 30px;
     }
     
     .discription {
       position: absolute;
       left: 0px;
       top: 250px;
       border: groove 1px solid;
       background: #EEE;
     }

JavaScript

'use strict'
var dragged, dragdrop, dropTarget, droparea;
var marker = document.getElementById("innerDropZone")
marker.style.display = "none";
var innerMarker = marker.cloneNode();
document.addEventListener('drag', function(event) {});



var HelloMessage = React.createClass({
    displayName: 'HelloMessage',

    onItemClick: function onItemClick(event) {


    //alert('helo');
       event.currentTarget.style.color= '#0000FF';
    },

    render: function render() {
        return React.createElement(
            'div',
            null,
            React.createElement(
                'ul',
                null,
                React.createElement(
                    'li',
                    { onClick: this.onItemClick },
                    'Component 1'
                )
            )
        );
    }

});



document.addEventListener('dragstart', function(event) {
  console.log(event.target);
  dragged = event.target;
  event.target.style.opacity = 0.9;

});

document.addEventListener('dragenter', function(event) {

  if (event.target.className === "dropzone") {
    marker.style.display = "block";
  }


  if (event.target.className === "innerDropZone") {
    event.target.style.background = '#CCC';

  }

});

document.addEventListener('dragleave', function(event) {
  event.target.style.border = '';
  event.target.style.background = '';
  if (event.target.className === "item" && event.target.parentNode.className === "dropzone" || event.target.parentNode.className === "dropContainer") {

    if (event.clientY > droparea) {
      console.log("below");
      event.target.parentNode.appendChild(document.getElementById("innerDropZone"));
      event.stopPropagation();
    } else if (event.clientY < droparea) {
      console.log("above");
      event.target.parentNode.insertBefore(marker, event.target);
      event.stopPropagation();
    }

  }

});

document.addEventListener('dragexit', function(event) {});


document.addEventListener('dragend', function(event)...