drag postion

by Rahul

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="pos"></div>
<div id="pos1"></div>

	<ul id="canvas">
		<li class="c"><div class="a">0</div><div class="a">1</div></li>
		<li class="c"><div class="a">2</div><div class="e">EMPTY</div></li>
		<li class="c"><div class="a">4</div><div class="a">5</div></li>
		<li class="c"><div class="e">EMPTY</div><div class="a">7</div></li>
		<li class="c"><div class="a">8</div><div class="a">9</div></li>
		<li class="c"><div class="a">10</div><div class="a">11</div></li>
		<li class="c"><div class="a">12</div><div class="a">13</div></li>
		<li class="c"><div class="b">BIG 14</div></li>
		<li class="c"><div class="b">BIG 15</div></li>
		<li class="c"><div class="e">EMPTY</div><div class="a">17</div></li>
	</ul>

CSS

ul{
width:400px;
text-align: justify;
}
li{
	border: 5px red solid;
	padding: 5px 2px;
}
.drophilit{
background-color:#FFF8DC;
} 
.di{
background-color:blue;
}

 
.e,.a {
	border:1px dotted green;
	width: 45%;
	 
	display: inline-block;
	padding:1px 2px;
	
}
.b{
padding:1px 2px;
border:1px dotted green;
width: 95%;
display: inline-block;
	
}

JavaScript

$("body").mousemove(function(event) {
	        var msg = "Handler for .mousemove() called at ";
	        msg += event.pageX + ", " + event.pageY;
	        $("#pos").html(   msg  );
	        });
 $.fn.dragInit=function(){
		 $(this).each(function(){
		 console.log("Drag called",this,$(this).data("drag_Enable"));
		 if($(this).data("drag_Enable")==true){
	  			$.noop();
	  	 }else{
	  			$(this).draggable({
	  				containment: "#canvas",
	  				cursor:"move",
	  				zIndex:99,
	  				delay:100,
	  				revert:"invalid",
	  				opacity:0.7,
	  				stop:function(event,ui){
	  				 
	  					console.log("END drag",this);
	  					if(ui.helper.hasClass("dummy-remove")){
	  						var emptyDrop1=$("<div class='e'>Stop</div>");
		  					emptyDrop1.dropInit();
		  					$(ui.helper).replaceWith(emptyDrop1);//replace original place with Empty cell
		  				}
	  					$(".dummy").remove();
	  					$("#canvas li").filter(function(){
								return $(this).children(":not('.e')").length==0; 
						}).remove();
	  				},
	  				drag:function(event,ui){
	  					var msg = "Handler for .mousemove() called at ";
	  			        msg += ui.position.top +":"+ui.position.left+ ", " + ui.offset.top+":"+ui.offset.left;
	  			        $("#pos1").html(   msg  );
	  					var elm=$(".dummy");
	  					if(elm.length==1){
	  						console.log(elm.css("height"),ui.helper.css("top"),(elm.css("height"))+ui.helper.css("top"))
						ui.helper.css("top", ui.position.top);
	  						ui.helper.css("left", ui.position.left);
	  						var top=elm.css("height")-ui.helper.css("top");
					     //   ui.position.top +=  top;
							//ui.helper.css("top","501");
							console.log("drag",ui.helper.attr("style"));
	  					}
	  						 
	  				}
	  				 
	  			 });
	  			$(this).data("drag_enable",true);	
	     }
		 }); 
		 return this;
	 }
	 $.fn.dropInit=function(){
		 $(this).each(function(){
		 console.log("drop called",this,$(this).data("drop_enable"));
		...