react实现拖动指定对象效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：react实现拖动指定对象效果代码，绿色智能拖拽到右侧绿色的长条上，蓝色也是如此。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
  background: #ddd;
}

* {
  box-sizing: border-box;
}

.dnd-example {
  display: flex;
  flex-wrap: wrap;
  width: 740px;
  padding: 30px;
  margin: 100px auto 0;
  background: white;
  font-family: sans-serif;
  font-size: 19px;
  text-align: center;
}
.dnd-example,
.dnd-example div {
  border-radius: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.dnd-example.dragging * {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.drop-description {
  width: 100%;
  font-weight: 300;
  margin: 1em 0 0;
}

.dnd-source-objects {
  margin-right: 30px;
}

.dnd-source-object {
  width: 240px;
  line-height: 38px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.2);
  cursor: -webkit-grab;
  cursor: grab;
}
.dnd-source-object:not(:last-child) {
  margin: 0 0 10px;
}
.dnd-source-object.green {
  background: #B0DE6B;
}
.dnd-source-object.blue {
  background: #76C9DE;
}

.dnd-drop-targets {
  background: #948F8F;
  flex: 1;
  padding: 15px;
}

.dnd-drop-target {
  position: relative;
  background: white;
  line-height: 50px;
  font-weight: 300;
  overflow: hidden;
}
.dnd-drop-target:not(:last-child) {
  margin: 0 0 10px;
}
.dnd-drop-target.green:before, .dnd-drop-target.blue:after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 100%;
  background: #B0DE6B;
}
.dnd-drop-target.blue:after {
  background: #76C9DE;
}
.dnd-drop-target.green.blue:after {
  left: 20px;
}
.dnd-drop-target.active.hover:after, .dnd-drop-target.active.hover:before {
  display: none;
}
.dnd-drop-target.active-green.active {
  box-shadow: 0 0 0 3px #948F8F, 0 0 0 4px #B0DE6B;
}
.dnd-drop-target.active-green.active.hover {
  background: #B0DE6B;
}
.dnd-drop-target.active-blue.active {
  box-shadow: 0 0 0 3px #948F8F, 0 0 0 4px #76C9DE;
}
.dnd-drop-target.active-blue.active.hover {
  background: #76C9DE;
}
.dnd-drop-target.disabled {
  opacity: 0.2;
  cursor: no-drop;
}

.dnd-draggable.dragging {
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}
</style>


  
  
</head>

<body translate="no">
    
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.0.11.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash-min.js"></script>
      <script >
(function() {
  var DRAG_THRESHOLD, Draggable, DropTarget, DropTargets, Example, LEFT_BUTTON, SourceObject, SourceObjects, div, p,
    indexOf = [].indexOf;

  ({div, p} = React.DOM);

  LEFT_BUTTON = 0;

  DRAG_THRESHOLD = 3; // pixels

  document.addEventListener('DOMContentLoaded', function() {
    return React.renderComponent(Example(), document.body);
  });

  Example = React.createClass({
    getInitialState: function() {
      return {
        currentDragItem: null
      };
    },
    render: function() {
      return div({
        className: `dnd-example ${this.state.currentDragItem ? 'dragging' : void 0}`,
        children: [
          SourceObjects({
            onDragStart: this.onDragStart,
            onDragStop: this.onDragStop
          }),
          DropTargets({
            currentDragItem: this.state.currentDragItem,
            onDrop: this.onDrop
          }),
          this.dropDescription()
        ]
      });
    },
    onDragStart: function(details) {
      return this.setState({
        currentDragItem: details
      });
    },
    onDragStop: function() {
      return this.setState({
        currentDragItem: null
      });
    },
    onDrop: function(target) {
      return this.setState({
        lastDrop: {
          source: this.state.currentDragItem,
          target: target
        }
      });
    },
    dropDescription: function() {
      var drop;
      if (drop = this.state.lastDrop) {
        return p({
          className: 'drop-description',
          children: `Dropped source ${drop.source.type}-${drop.source.index} on target ${drop.target.index}`
        });
      }
    }
  });

  SourceObjects = React.createClass({
    render: function() {
      var i, object;
      return div({
        className: 'dnd-source-objects',
        children: (function() {
          var j, len, ref, results;
          ref = this.objects();
          results = [];
          for (i = j = 0, len = ref.length; j < len; i = ++j) {
            object = ref[i];
            results.push(SourceObject({
              type: object.type,
              index: i + 1,
              children: i + 1,
              onDragStart: this.props.onDragStart,
              onDragStop: this.props.onDragStop
            }));
          }
          return results;
        }).call(this)
      });
    },
    objects: function() {
      var i;
      return _.flatten([
        (function() {
          var j,
        results;
          results = [];
          for (i = j = 0; j <= 2; i = ++j) {
            results.push({
              type: 'green'
            });
          }
          return results;
        })(),
        (function() {
          var j,
        results;
          results = [];
          for (i = j = 0; j <= 2; i = ++j) {
            results.push({
              type: 'blue'
            });
          }
          return results;
        })()
      ]);
    }
  });

  SourceObject = React.createClass({
    render: function() {
      return Draggable({
        className: `dnd-source-object ${this.props..........完整代码请登录后点击上方下载按钮下载查看