Drag/drop

by Victor Stodell

HTML

<div id="columns">
  <div class="column" draggable="true">
      <header>1</header>
      Content...
  </div>
  <div class="column" draggable="true">
      <header>2</header>
      Content...
  </div>
  <div class="column" draggable="true">
      <header>3</header>
      Content...
  </div>
</div>

CSS

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.column {
  height: 70px;
  width: 150px;
  float: left;
  border: 1px solid #666;
  background-color: #ccc;
  margin-right: 5px;
  cursor: move;
}
.column header {
  color: #fff;
  background: #666;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}
.column.dragged {
  opacity: 0.4;
}
.column.over {
  border: 1px dashed #000;
}

JavaScript

var currentObject = null;

function handleDragStart(e) {
  currentObject = this;
  $(this).addClass('dragged');
    
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragEnd(e) {
  $(this).removeClass('dragged');
  $('#columns .column').removeClass('over');
}

function handleDragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  return false;
}

function handleDragEnter(e) {
  $(this).addClass('over');
}

function handleDragLeave(e) {
  $(this).removeClass('over');
}

function handleDrop(e) {
    currentObject.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
}

$(document).ready(function() {
    $('#columns .column')
        .on('dragstart', handleDragStart)
        .on('dragend', handleDragEnd)
        .on('dragover', handleDragOver)
        .on('dragenter', handleDragEnter)
        .on('dragleave', handleDragLeave)
        .on('drop', handleDrop);
    
    $.event.props.push('dataTransfer');
});