LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
body {
  background: #ddd;
}

* {
  box-sizing: border-box;
}

.dnd-example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      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;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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);
}
JS
{div, p} = React.DOM

LEFT_BUTTON = 0
DRAG_THRESHOLD = 3 # pixels

document.addEventListener 'DOMContentLoaded', ->
  React.renderComponent Example(), document.body

Example = React.createClass
  getInitialState: ->
    currentDragItem: null

  render: ->
    div
      className: "dnd-example #{'dragging' if @state.currentDragItem}"
      children: [
        SourceObjects
          onDragStart: @onDragStart
          onDragStop: @onDragStop
        DropTargets
          currentDragItem: @state.currentDragItem
          onDrop: @onDrop
        @dropDescription()
      ]

  onDragStart: (details) ->
    @setState currentDragItem: details

  onDragStop: ->
    @setState currentDragItem: null

  onDrop: (target) ->
    @setState lastDrop:
      source: @state.currentDragItem
      target: target

  dropDescription: ->
    if drop = @state.lastDrop
      p
        className: 'drop-description'
        children: "Dropped source #{drop.source.type}-#{drop.source.index} on target #{drop.target.index}"

SourceObjects = React.createClass
  render: ->
    div
      className: 'dnd-source-objects'
      children: for object, i in @objects()
        SourceObject
          type: object.type
          index: i + 1
          children: i + 1
          onDragStart: @props.onDragStart
          onDragStop: @props.onDragStop

  objects: ->
    _.flatten [
      { type: 'green' } for i in [0..2]
      { type: 'blue' } for i in [0..2]
    ]

SourceObject = React.createClass
  render: ->
    Draggable
      className: "dnd-source-object #{@props.type}"
      children: @props.children
      onDragStart: @props.onDragStart
      onDragStop: @props.onDragStop
      dragData: @dragData

  dragData: ->
    type: @props.type
    index: @props.index

Draggable = React.createClass
  getInitialState: ->
    mouseDown: false
    dragging: false

  render: ->
    @transferPropsTo div
      style: @style()
      className: "dnd-draggable #{'dragging' if @state.dragging}"
      children: @props.children
      onMouseDown: @onMouseDown

  style: ->
    if @state.dragging
      position: 'absolute'
      left: @state.left
      top: @state.top
    else
      {}

  onMouseDown: (event) ->
    if event.button == LEFT_BUTTON
      event.stopPropagation()
      @addEvents()
      pageOffset = @getDOMNode().getBoundingClientRect()
      @setState
        mouseDown: true
        originX: event.pageX
        originY: event.pageY
        elementX: pageOffset.left
        elementY: pageOffset.top

  onMouseMove: (event) ->
    deltaX = event.pageX - @state.originX
    deltaY = event.pageY - @state.originY
    distance = Math.abs(deltaX) + Math.abs(deltaY)

    if !@state.dragging and distance > DRAG_THRESHOLD
      @setState dragging: true
      @props.onDragStart? @props.dragData?()

    if @state.dragging
      @setState
        left: @state.elementX + deltaX + document.body.scrollLeft
        top: @state.elementY + deltaY + document.body.scrollTop

  onMouseUp: ->
    @removeEvents()
    if @state.dragging
      @props.onDragStop()
      @setState dragging: false

  addEvents: ->
    document.addEventListener 'mousemove', @onMouseMove
    document.addEventListener 'mouseup', @onMouseUp

  removeEvents: ->
    document.removeEventListener 'mousemove', @onMouseMove
    document.removeEventListener 'mouseup', @onMouseUp

DropTargets = React.createClass
  render: ->
    div
      className: 'dnd-drop-targets'
      children: for target, i in @targets()
        DropTarget
          target: target
          index: i
          currentDragItem: @props.currentDragItem
          onDrop: @props.onDrop

  targets: ->
    [
      { accepts: ['blue'] }
      { accepts: ['green'] }
      { accepts: ['blue', 'green'] }
      { accepts: [] }
    ]

DropTarget = React.createClass
  getInitialState: ->
    hover: false

  render: ->
    div
      className: @classes()
      children: 'accepts ' + @acceptsDescription()
      onMouseEnter: => @setState hover: true
      onMouseLeave: => @setState hover: false
      onMouseUp: @onDrop

  classes: ->
    [
      'dnd-drop-target'
      "#{@props.target.accepts.join ' '}"
      'active' if @active()
      'active-green' if @active() and @props.currentDragItem.type == 'green'
      'active-blue' if @active() and @props.currentDragItem.type == 'blue'
      'disabled' if @disabled()
      'hover' if @state.hover
    ].join ' '

  active: ->
    item = @props.currentDragItem
    item and item.type in @props.target.accepts

  disabled: ->
    item = @props.currentDragItem 
    item and item.type not in @props.target.accepts

  acceptsDescription: ->
    if @props.target.accepts.length > 0
      @props.target.accepts.join ' & '
    else
      'nothing'

  onDrop: ->
    if @active()
      @props.onDrop? index: @props.index + 1
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:39

Related Codes

Pen ID
Pen ID
Pen ID