元素拖动插件

爱被打了一巴掌 2022-04-11 10:09 192阅读 0赞

插件：[https://www.html5tricks.com/jquery-drag-element.html][https_www.html5tricks.com_jquery-drag-element.html]  
默认拖动元素初始化位置是随机的，我额外加了两个参数bottomRight 和 topLeft 进行定位。  
（1）插件代码：

$.fn.extend({ 
    		//---元素拖动插件
        dragging:function(data){    
    		var $this = $(this);
    		var xPage;
    		var yPage;
    		var X;//
    		var Y;//
    		var xRand = 0;//
    		var yRand = 0;//
    		var father = $this.parent();
    		var defaults = { 
    			move : 'both',
    			randomPosition : true ,
    			hander:1
    		}
    		var opt = $.extend({ },defaults,data);
    		var movePosition = opt.move;
    		var random = opt.randomPosition;
    		
    		var hander = opt.hander;
    		
    		if(hander == 1){ 
    			hander = $this; 
    		}else{ 
    			hander = $this.find(opt.hander);
    		}
    		
    			
    		//---初始化
    		father.css({ "position":"relative","overflow":"hidden"});
    		$this.css({ "position":"absolute"});
    		hander.css({ "cursor":"move"});
    
    		var faWidth = father.width();
    		var faHeight = father.height();
    		var thisWidth = $this.width()+parseInt($this.css('padding-left'))+parseInt($this.css('padding-right'));
    		var thisHeight = $this.height()+parseInt($this.css('padding-top'))+parseInt($this.css('padding-bottom'));
    		
    		var mDown = false;//
    		var positionX;
    		var positionY;
    		var moveX ;
    		var moveY ;
    		
    		if(random){ 
    			$thisRandom();
    		}else{ 
    			if(!!opt.bottomRight){ 
    				$this.each(function(index){ 
    					var bottomRight = opt.bottomRight.split(",");
    					$(this).css({ 
    						bottom: bottomRight[0],
    						right: bottomRight[1],
    					});
    					return false;
    				});
    			}
    			
    			if(!!opt.topLeft){ 
    				$this.each(function(index){ 
    					var topLeft = opt.topLeft.split(",");
    					$(this).css({ 
    						top: topLeft[0],
    						left: topLeft[1],
    					});
    					return false;
    				});
    			}
    		}
    		function $thisRandom(){  //随机函数
    			$this.each(function(index){ 
    				
    				var randY = parseInt(Math.random()*(faHeight-thisHeight));///
    				var randX = parseInt(Math.random()*(faWidth-thisWidth));///
    				if(movePosition.toLowerCase() == 'x'){ 
    					$(this).css({ 
    						left:randX
    					});
    				}else if(movePosition.toLowerCase() == 'y'){ 
    					$(this).css({ 
    						top:randY
    					});
    				}else if(movePosition.toLowerCase() == 'both'){ 
    					$(this).css({ 
    						top:randY,
    						left:randX
    					});
    				}
    			});	
    		}
    		
    		hander.mousedown(function(e){ 
    			father.children().css({ "zIndex":"0"});
    			$this.css({ "zIndex":"1"});
    			mDown = true;
    			X = e.pageX;
    			Y = e.pageY;
    			positionX = $this.position().left;
    			positionY = $this.position().top;
    			return false;
    		});
    			
    		$(document).mouseup(function(e){ 
    			mDown = false;
    		});
    			
    		$(document).mousemove(function(e){ 
    			xPage = e.pageX;//--
    			moveX = positionX+xPage-X;
    			
    			yPage = e.pageY;//--
    			moveY = positionY+yPage-Y;
    			
    			function thisXMove(){  //x轴移动
    				if(mDown == true){ 
    					$this.css({ "left":moveX});
    				}else{ 
    					return;
    				}
    				if(moveX < 0){ 
    					$this.css({ "left":"0"});
    				}
    				if(moveX > (faWidth-thisWidth)){ 
    					$this.css({ "left":faWidth-thisWidth});
    				}
    				return moveX;
    			}
    			
    			function thisYMove(){  //y轴移动
    				if(mDown == true){ 
    					$this.css({ "top":moveY});
    				}else{ 
    					return;
    				}
    				if(moveY < 0){ 
    					$this.css({ "top":"0"});
    				}
    				if(moveY > (faHeight-thisHeight)){ 
    					$this.css({ "top":faHeight-thisHeight});
    				}
    				return moveY;
    			}
    
    			function thisAllMove(){  //全部移动
    				if(mDown == true){ 
    					$this.css({ "left":moveX,"top":moveY,bottom:'auto',right:'auto'});
    				}else{ 
    					return;
    				}
    				if(moveX < 0){ 
    					$this.css({ "left":"0"});
    				}
    				if(moveX > (faWidth-thisWidth)){ 
    					$this.css({ "left":faWidth-thisWidth});
    				}
    
    				if(moveY < 0){ 
    					$this.css({ "top":"0"});
    				}
    				if(moveY > (faHeight-thisHeight)){ 
    					$this.css({ "top":faHeight-thisHeight});
    				}
    			}
    			if(movePosition.toLowerCase() == "x"){ 
    				thisXMove();
    			}else if(movePosition.toLowerCase() == "y"){ 
    				thisYMove();
    			}else if(movePosition.toLowerCase() == 'both'){ 
    				thisAllMove();
    			}
    		});
        }
    });

（2）使用方法：

/* .search-card: 要拖动的区域 */
    $('.search-card').each(function(){  
    	$(this).dragging({ 
    		move : 'both', //可上下左右移动
    		randomPosition:false,//不随机定位
    		hander:'#search-card-move', //可点击拖动的区域
    		bottomRight:"1rem,1rem" //位置定位
    	});
    });

[https_www.html5tricks.com_jquery-drag-element.html]: https://www.html5tricks.com/jquery-drag-element.html