zoukankan      html  css  js  c++  java
  • 自己定义拖拽框插件

    1、HTML代码例如以下 注意引入jquery和自定仪的drag.js , 路径正确打开页面就能看到效果

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus?">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>拖拽jQuery  </title>
      <style type="text/css">
    	*{margin:0;padding:0;border:0;}
      </style>
     </head>
     <body>
    	
    	<div class="divbox" arrow="left" style="border:1px solid red;500px;height:200px;background:#f7f7f7;position:absolute;top:100px;left:100px;">
    		<h3 style="height:30px;background:#181818;color:#fff;">1111111</h3>
    		左右移动 由arrow="left"控制
    	</div>
    	
    	<div class="divbox" arrow="top" style="border:1px solid red;500px;height:200px;background:#f7f7f7;position:absolute;top:100px;right:100px;">
    		<h3 style="height:30px;background:#181818;color:#fff;">22222222</h3>
    		上下移动 由arrow="top"控制
    	</div>
    	
    	<div class="divbox"  style="border:1px solid red;500px;height:200px;background:#f7f7f7;position:absolute;bottom:100px;left:100px;">
    		<h3 style="height:30px;background:#181818;color:#fff;">22222222</h3>
    		全局移动 没有arrow属性就没有限制
    	</div>
    
    	<div class="divbox" handle="" style="border:1px solid red;500px;height:200px;background:#f7f7f7;position:absolute;bottom:100px;right:100px;">
    		全局移动 没有h3标签 须要加入handle属性 假设为空则总体都能拖动
    	</div>
    
    	
    	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    	<script type="text/javascript" src="drag.js"></script>
    	<script type="text/javascript">
    		$(function(){
    			$('.divbox').WanglDrag({handle:'h3'});
    		});
    	</script>
     </body>
    </html>

    2、自己定义drag.js

    /**
     * @author:wangl
     */
    (function($){
    	/**插件入口**/
    	$.fn.WanglDrag = function(options){
    		var z_index = 0;
    		this.each(function(){
    			//參数优先级从高到低 为: 属性參数 、 调用參数 、 默认參数
    			var opts = $.extend({},$.fn.WanglDrag.defaults,options,$.fn.WanglDrag.parseOptions(this));
    			alert(JSON.stringify(opts));
    			opts.box = $(this);
    			init(opts);
    		});
    	};
    	var z_index = -1;
    	/**初始化**/
    	function init(opts){
    		var $box = opts.box,
    			x = 0,
    			y = 0,
    			left = 0,
    			top = 0,
    			b_width = $(document).width(),
    			b_height = $(document).height(),
    			maxWidth = b_width - $box.outerWidth(),
    			maxHeight = b_height - $box.outerHeight();
    		$handle = opts.handle ?

    $box.find(opts.handle) : $box; $handle.css("cursor",'move'); $box.on('mousemove',function(e){ $box.css({"z-index":z_index++}); }); $handle.on('mousedown',function(e){ x = e.clientX; y = e.clientY; var $this = $(this); var offset = $(this).offset(); left = offset.left; top = offset.top; var isDrag = true; //alert('x:'+x+',y:'+y+',left:'+left+',top:'+top); $(document).on('mousemove',function(e){ if(isDrag){ var new_left = left + e.clientX - x; var new_top = top + e.clientY - y; if(opts.arrow && opts.arrow=="top")new_left=left;//控制垂直方向 if(opts.arrow && opts.arrow=="left")new_top=top;//控制水平方向 if(new_left<=0)new_left = 2; if(new_top<=0)new_top = 2; if(new_left >= maxWidth)new_left = maxWidth; if(new_top >= maxHeight)new_top = maxHeight; $box.css({"top":new_top,"left":new_left}); } }).on('mouseup',function(){ isDrag = false; }); }); }; /**默认參数*/ $.fn.WanglDrag.defaults = { handle : "", arrow : "" } /**属性參数*/ $.fn.WanglDrag.parseOptions = function(target){ var $target = $(target); return { handle : $target.attr('handle'), arrow : $target.attr('arrow') } } })(jQuery)



  • 相关阅读:
    jquery序列化form表单使用ajax提交后处理返回的json数据
    log4net VS2012 日志layout自定义,error日志和info日志分别记录到不同文件中
    Bootstrap 填坑1 栅格浮动问题
    C# MVC Transaction 事务
    C# MVC 用户登录状态判断
    SQL中MAX()和MIN()函数的使用
    简单表的 分页存储过程 (不支持多表连接)
    SQL Server 生成数据库代码,包含数据
    js 将数值显示为金额
    Jquery.Validate 扩展方法
  • 原文地址:https://www.cnblogs.com/gavanwanggw/p/6848866.html
Copyright © 2011-2022 走看看