wallin · September 17, 2011 14:24
diff --git a/multiple_touchdrag.html b/multiple_touchdrag.html
 <html>
  <head>
    <meta charset=utf-8 />
    <title>Drag n' drop touch demo - sewa.se</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
      .draggable {
        position: absolute;
        left: 30px;
        top: 30px;
        width: 60px;
        height: 60px;
        margin-left: -30px;
        margin-top: -30px;

        color: #FFF;
        font: bold 16px Helvetica,Arial,Sans-serif;
        text-align: center;
        background-color: #ABF;
        border: 3px solid #669;
      }
    </style>
  </head>
  <body>
    <div class="draggable">Drag me!</div>
    <div class="draggable">Drag me!</div>
  </body>
    <script type="text/javascript">
      $.fn.draggable = function() {
        var offset = null;
        var start = function(e) {
          var orig = e.originalEvent;
          var pos = $(this).position();
          offset = {
            x: orig.changedTouches[0].pageX - pos.left,
            y: orig.changedTouches[0].pageY - pos.top
          };
        };
        var moveMe = function(e) {
          e.preventDefault();
          var orig = e.originalEvent;
          $(this).css({
            top: orig.changedTouches[0].pageY - offset.y,
            left: orig.changedTouches[0].pageX - offset.x
          });
        };
        this.bind("touchstart", start);
        this.bind("touchmove", moveMe);
      };

      $(function() {
        $(".draggable").draggable();
      });
    </script>
 </html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Drag n' drop touch demo - sewa.se</title>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
	<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<style type="text/css">
	.draggable {
	position: absolute;
	left: 30px;
	top: 30px;
	width: 60px;
	height: 60px;
	margin-left: -30px;
	margin-top: -30px;

	color: #FFF;
	font: bold 16px Helvetica,Arial,Sans-serif;
	text-align: center;
	background-color: #ABF;
	border: 3px solid #669;
	}
	</style>
	</head>
	<body>
	<div class="draggable">Drag me!</div>
	<div class="draggable">Drag me!</div>
	</body>
	<script type="text/javascript">
	$.fn.draggable = function() {
	var offset = null;
	var start = function(e) {
	var orig = e.originalEvent;
	var pos = $(this).position();
	offset = {
	x: orig.changedTouches[0].pageX - pos.left,
	y: orig.changedTouches[0].pageY - pos.top
	};
	};
	var moveMe = function(e) {
	e.preventDefault();
	var orig = e.originalEvent;
	$(this).css({
	top: orig.changedTouches[0].pageY - offset.y,
	left: orig.changedTouches[0].pageX - offset.x
	});
	};
	this.bind("touchstart", start);
	this.bind("touchmove", moveMe);
	};

	$(function() {
	$(".draggable").draggable();
	});
	</script>
	</html>