JSFiddle - React, Tailwind, and code Playground

by Daniel Orlowski

HTML

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!DOCTYPE html>
<title>Test</title>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="//code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div class="ui-grid-a">
        <div class="ui-block-a">
          <ul data-role="listview" style="height:500px;overflow-y: auto;">
          </ul>
        </div>
        <div class="ui-block-b" style="background:gray; height:500px">
          <ul data-role="listview" style="height:500px;overflow-y: auto;">
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

.ui-page-theme-a li.ui-li-static.ui-body-inherit.catched {
		  background-color: cadetblue;
		  color: white;
		}

JavaScript

//http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices

function fillList() {
  for (i = 1; i < 2; i++) {
    "Acura,Audi,BMW,Cadillac,Ferrari".split(',').forEach(function(e, idx) {
      $('.ui-block-a ul').append("<li data-id='li-" + i + "-" + idx + "'>" + e + "</li>");
      $('.ui-block-b ul').append("<li data-id='li-" + i + "-" + idx + "'>" + e + "</li>");
    })

    $('ul').listview().listview('refresh')
  }
}

function clearAll() {
  $('ul li').removeClass('catched');
}

$(document).ready(function() {
  console.log('ready');

  fillList();

  $('li').draggable({
  appendTo: "body",
  zIndex: 10000,
   distance: 0,
  stack: "li",
    disabled: false,
    delay: 2000,
    cursor: 'move',
    revert: true,
    start: function(e) {
      console.log('draggable start');
      
    },
    stop: function(e) {
      console.log('draggable stop');
    },
  });

  $('.ui-block-b')

  .droppable({
    accept: 'li',
    drop: function(e) {
      console.log('droppable drop');
      clearAll();
    },
    over: function(e) {
      console.log('droppable over');
    },
    out: function(e) {
      console.log('droppable out');
    },
  })
})