Drag And Drop für mobile Geräte mit jQuery UI und Touch Punch

Drag And Drop kann mit Query UI und draggable sehr einfach umgesetzt werden. Aber wie bringe ich auch mobile Geräte dazu richtig mit Drag and Drop umzugehen?

jQuery UI Touch Punch heißt das Zauberwort. Dieses kleine Script bringt den gängigen mobilen Devices auch jQuery UI draggable bei.

HTML

Wir platzieren ein DIV mit der ID block. Außerdem binden wir drei notwendige Scripts ein. Die neueste Version der Bibliothek jQuery, jQuery UI um das Ganze noch um einige Elemente, wie z.B. Drag and Drop zu erweitern und jQuery UI Touch Punch, ein kleines Script um die Funktionalität "draggable" auch auf mobilen Geräten, wie IOS, Android und Windows Phone zu gewährleisten.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Drag and Drop für mobile Devices</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<style type="text/css">
#block {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 100px;
  background-color: blue;
}
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>

JS

Folgendes JS gibt dem DIV-Element #block die Eigenschaft per Drag and Drop verschoben werden zu können. Dabei ändert das DIV die Farbe, während es verschoben wird. draggable hat mehrere Events. Darunter "start", wenn ein Element angehoben wird und "stop", wenn es wieder niedergelassen wird.

$(document).ready(function(){
  $( "#block" ).draggable({
		start: function() {
			// Der BLock wird losgelassen
			$(this).css('background-color','red');
		},
    stop: function() {
			// Der BLock wird losgelassen
			$(this).css('background-color','blue');
		}
	});
});