draggable_form.jsx

define(function (require) {
  'use strict';

  var React = require('react');
  var _ = require('underscore');
  var DragDropMixin = require('react-dnd').DragDropMixin;
  var ItemTypes = require('components/ItemTypes');

  var dragSource = {
    beginDrag: function (component) {
      debugger;
      return {
        item: {
          id: component.props.id
        }
      };
    }
  };

  var dropTarget = {
    over: function (component, id) {
      debugger;
    }
  };

  var DraggableDiv = React.createClass({
    mixins: [DragDropMixin],
    statics: {
      configureDragDrop: function (register) {
        register(ItemTypes.INPUT, {
          dragSource: dragSource,
          dropTarget: dropTarget
        });
      }
    },
    render: function () {
      return <div
        {...this.dragSourceFor(ItemTypes.INPUT)}
        {...this.dropTargetFor(ItemTypes.INPUT)}
      >
        <h1>teste</h1>
      </div>;
    }
  });

  var DraggableForm = React.createClass({
    render: function () {
      return <div>{_.map([1,2,3,4,5], function (index) {
        return <DraggableDiv id="div-{index}" />;
      })}</div>;
    }
  });

  return DraggableForm;
});