SORTABLE

by bizamajig

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<ul class="list-group" id="wrapper">
  <li class="list-group-item">Block 1</li>
  <li class="list-group-item">Block 2</li>
  <li class="list-group-item">Block 3</li>
  <li class="list-group-item">Block 4</li>
  <li class="list-group-item">Block 5</li>
  <li class="list-group-item">Block 6</li>
  <li class="list-group-item">Block 7</li>
  <li class="list-group-item">Block 8</li>
  <li class="list-group-item">Block 9</li>
  <li class="list-group-item">Block 10</li>
  <li class="list-group-item">Block 11</li>
  <li class="list-group-item">Block 12</li>
  <li class="list-group-item">Block 13</li>
  <li class="list-group-item">Block 14</li>
  <li class="list-group-item">Block 15</li>
  <li class="list-group-item">Block 16</li>
  <li class="list-group-item">Block 17</li>
  <li class="list-group-item">Block 18</li>
  <li class="list-group-item">Block 19</li>
  <li class="list-group-item">Block 20</li>
  <li class="list-group-item">Block 21</li>
  <li class="list-group-item">Block 22</li>
  <li class="list-group-item">Block 23</li>
</ul>

CSS

.list-group-item{
height:80px;
font-size:50px;


}

.selected{

border:2px solid red;
}

JavaScript

/*!
 JQUERY UI PUNCH TOUCH CODE
 */
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

//MY CODE SO FAR

$('#wrapper li').on('taphold', function(event, ui) {

				$( "#wrapper li" ).removeClass('selected');
			
				$( "#wrapper" ).sortable({disabled:false});
			
				$(this).addClass('selected');

			
});



 				$( "#wrapper" ).sortable({disabled:true,containment: "parent"});
         
$( "#wrapper" ).on( "sortupdate", function( event, ui ) {

             $( "#wrapper" ).sortable({disabled:true});
} );