JSFiddle - React, Tailwind, and code Playground

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>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.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

function fillList() {
	for (i = 1; i < 25; i++) {
		"Acura,Audi,BMW,Cadillac,Ferrari".split(',').forEach(function (e, idx) {
			$('.ui-block-a 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').bind('taphold', function (event, ui) {
		console.log('taphold');
		clearAll();
		$(this).addClass('catched')
		$(this).draggable('enable');

// aproach from http://stackoverflow.com/a/9922048/582727
// doesn't work at least on ios
/*
    var offset = $(this).offset();
    var type   = $.mobile.touchEnabled ? 'touchstart' : 'mousedown';
    var newevent = $.Event(type);
    newevent.which  = 1;
    newevent.target = this;
    newevent.pageX  = event.pageX ? event.pageX : offset.left;
    newevent.pageY  = event.pageY ? event.pageX : offset.top;

    $(this).trigger(newevent);
*/
/////////////////////////////////////
	});

	$('li').draggable({
		disabled:true,
	
		cursor: 'move',
		revert: true,
		start: function (e) {
			console.log('draggable start');
		},
		stop: function (e) {
			console.log('draggable stop');
			//clearAll();
		},
	});

	$('.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');
		},
	})
})