JSFiddle - React, Tailwind, and code Playground

by tibum

HTML

<div>
  <div class="dragdrop" style="top:0px;  left: 0px;  ">1</div>
  <div class="dragdrop" style="top:40px; left: 0px;  ">2</div>
  <div class="dragdrop" style="top:60px; left: 0px;  ">3</div>
  <div class="dragdrop" style="top:0px;  left: 100px;">4</div>
  <div class="dragdrop" style="top:40px; left: 100px;">5</div>
  <div class="dragdrop" style="top:60px; left: 100px;">6</div>
</div>

CSS

.dragdrop {
  background: red;
  margin: 15px;
  width: 100px;
}

.ui-state-hover {
  background: lightyellow;
}

.ui-state-active {
  background: lightgray
}

JavaScript

jQuery.fn.swap = function(b) {
  // method from: http://blog.pengoworks.com/index.cfm/2008/9/24/A-quick-and-dirty-swap-method-for-jQuery
  b = jQuery(b)[0];
  var a = this[0];
  var t = a.parentNode.insertBefore(document.createTextNode(''), a);
  b.parentNode.insertBefore(a, b);
  t.parentNode.insertBefore(b, t);
  t.parentNode.removeChild(t);
  return this;
};


$(".dragdrop").draggable({
  revert: true,
  helper: "clone"
});

$(".dragdrop").droppable({
  accept: ".dragdrop",
  activeClass: "ui-state-hover",
  hoverClass: "ui-state-active",
  drop: function(event, ui) {

    var draggable = ui.draggable,
      droppable = $(this),
      dragPos = draggable.position(),
      dropPos = droppable.position();

    draggable.css({
      left: dropPos.left + 'px',
      top: dropPos.top + 'px'
    });

    droppable.css({
      left: dragPos.left + 'px',
      top: dragPos.top + 'px'
    });
    draggable.swap(droppable);
  }
});