zoukankan      html  css  js  c++  java
  • Jquery插件封装之拖动(Step1简单版)

     

      

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>拖动插件的封装</title>
    		<style type="text/css">
    			body{
    				position: relative;
    			}
    			.conten{
    				 100px;
    				height: 100px;
    				position: absolute;
    				background: #ccc;
    				left: 0px;
    				top: 0px;
    			}
    			.conten2{
    				 100px;
    				height: 100px;
    				position: absolute;
    				background: #111;
    				left: 200px;
    				top: 200px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="conten">
    			1
    		</div>
    		<div class="conten2">
    			2
    		</div>
    	</body>
    	<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
    	<script src="js/harold.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    			$(function(){
    				
    				$('.conten2').harold_drag();
    				$('.conten').harold_drag();
    			});
    			
    	</script>
    
    </html>
    

      harold.js文件

    //采用$.fn形式封装插件
    			(function($){
    				//插件名称
    				$.fn.harold_drag = function(options){
    					
    					$(this).on('mousedown',function(e){
    						$this = $(this);
    					var x = e.clientX;
    					var y = e.clientY;	
    					var ox = $(this).offset().left;
    					var oy = $(this).offset().top;
    					$(document).on('mousemove',function(e){
    					var nx = e.clientX;
    					var ny = e.clientY;
    					$this.css({
    						top : ny - (y -oy),
    						left : nx - (x -ox)
    					});
    					
    					}).on('mouseup',function(e){
    						$(document).off();
    				});
    			});
    				};
    			})(jQuery);
    			
    

      

  • 相关阅读:
    Bzoj4627 [BeiJing2016]回转寿司
    Bzoj1901 Zju2112 Dynamic Rankings
    COGS728. [网络流24题] 最小路径覆盖问题
    Bzoj4568 [Scoi2016]幸运数字
    Bzoj2728 [HNOI2012]与非
    HDU4609 3-idiots
    Bzoj2194 快速傅立叶之二
    Bzoj2179 FFT快速傅立叶
    模拟52 题解
    模拟51 题解
  • 原文地址:https://www.cnblogs.com/lishengjun/p/6595244.html
Copyright © 2011-2022 走看看