React Dnd1

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

import React from 'react';
import { DragSource } from 'react-dnd';

/* ... */

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview()
  };
}

class ComponentWithCopyEffect {
  render() {
    const { connectDragSource } = this.props;

    return connectDragSource(
      <div>
        This div shows a plus icon in some browsers.
      </div>,
      { dropEffect: 'copy' }
    );
  }
}
ComponentWithCopyEffect = DragSource(/* ... */)(ComponentWithCopyEffect);

class ComponentWithHandle {
  render() {
    const { connectDragSource, connectDragPreview } = this.props;

    return connectDragPreview(
      <div>
        This div is draggable by a handle!
        {connectDragSource(
          <div>drag me</div>
        )}
      </div>
    );
  }
}
ComponentWithHandle = DragSource(/* ... */)(ComponentWithHandle);

class ComponentWithImagePreview {
  componentDidMount() {
    const { connectDragPreview } = this.props;

    const img = new Image();
    img.src = 'http://mysite.com/image.jpg';
    img.onload = () => connectDragPreview(img);
  }

  render() {
    const { connectDragSource } = this.props;

    return connectDragSource(
      <div>
        This div shows an image when dragged!
      </div>
    );
  }
}
ComponentWithImagePreview = DragSource(/* ... */)(ComponentWithImagePreview);

ReactDOM.render(<ComponentWithImagePreview/>,document.getElementById('board'));