jQuery插件，迅速的實現拖拽功能

時間 2019-11-18

原文原文鏈接

原文網址：http://www.oschina.net/code/snippet_82493_22787javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jsmartdrag.js"></script>
<link href="css/jsmartdrag.css" rel="stylesheet" type="text/css" />
<title>jsmartdrag實例頁面</title>
<script type="text/javascript">
$(document).ready(function(){
	js = $(".source").jsmartdrag({ 
		target:'.target',
		afterDrag:afterDrag
	});
});
function afterDrag(selected,currentObj,targetSelected){	
	if(selected){
		alert("將元素ID爲"+currentObj.attr("id")+"移動到了元素ID爲"+targetSelected.attr("id")+"上");	
	}else{
		alert("沒有拖動到指定的區域裏哦!");
	}
}
</script>
</head>
<body>
	<div id="target1"  class="target">target1</div>
	<div id="target2"  class="target">target2</div>
	<div id="target3"  class="target">target3</div>
	<div id="source1"  class="source" >source1</div>
	<div id="source2"  class="source" >source2</div>
	<div id="source3"  class="source" >source3</div>
</body>
</html>

(function($){ 
	var move = false;
	var cloneDiv = null;
	var targetObj = null;
	var currentObj = null;
	var targetSelected = null;
	var selected = false;
	var scrollTop = 0; 
	$.fn.jsmartdrag = function(options){ 
		var jQueryObj = this;		
		var defaults = { 
			sourceClass:"jsmartdrag-source",
			sourceHoverClass:"jsmartdrag-source-hover",
			cursorHoverClass:"jsmartdrag-cursor-hover",
			targetHoverClass:"jsmartdrag-target-hover",
			canSelect:false,
			target:".target",			
			onDrag:    function(){},
			afterDrag: function(selected,currentObj,targetObj){}
		};
		options = $.extend(defaults, options);
		
		this.each(function(){
			$("body").css("-moz-user-select","none");
			if(!defaults.canSeletct){
				document.ondragstart = function () { return false; }; //禁止瀏覽器的拖拽行爲 
				document.onselectstart = function () {return false; };//禁止瀏覽器的選中行爲 
			}
			if(options.target!=null){
				targetObj = $(options.target);
			}			
			$(this).addClass(options.sourceClass);
			$(this).mousedown(function(){
				currentObj = $(this);
				move = true;
				$(this).addClass(options.sourceHoverClass);
				cloneDiv = $(this).clone();
				cloneDiv.attr("id","cloneDiv");
				cloneDiv.addClass(options.sourceHoverClass);
				scrollTop = $("html,body").scrollTop();//當鼠標點擊的時候才計算滾動的高度，是爲了防止頁面瀏覽的時候用戶改變了瀏覽器高度 
			});
			$(document).mousemove(function(event){
				if(move){ 
					if($("#cloneDiv").length<=0){
						$("body").append(cloneDiv);
					}
					var dragPos = {x1:0,x2:0,y1:0,y2:0};
					var pageX = 0;
					var pageY = 0;
					if($.browser.msie){ 
						pageX = event.clientX;
						pageY = event.clientY+scrollTop;  
					}else{					
						pageX = event.pageX;
						pageY = event.pageY;
					}
					dragPos.x1 =pageX-cloneDiv.innerWidth()/2; 
					dragPos.y1 = pageY-cloneDiv.innerHeight()/2;
					cloneDiv.css({left:dragPos.x1+"px",top:dragPos.y1+"px",position:'absolute'});					
					if(targetObj.length>0){
						targetObj.each(function(){						
							if(checkAreaOverride(cloneDiv,$(this))){								
								$(this).addClass(options.targetHoverClass);
							}else{
								$(this).removeClass(options.targetHoverClass);
							}	
						});	
					}	
					options.onDrag();
				}
			});
			$(document).mouseup(function(){
				if(move){
					move = false; 
					if(cloneDiv!=null && targetObj!=null){
						if($($("[class$='jsmartdrag-target-hover']")[0]).length>0){
							targetSelected =	$($("[class$='jsmartdrag-target-hover']")[0]);
							selected = true;
						}
						options.afterDrag(selected,currentObj,targetSelected);
						//恢復初始狀態
						cloneDiv.remove();
						cloneDiv.removeClass(options.cursorHoverClass);
						$("[class$='jsmartdrag-target-hover']").each(function(){
							$(this).removeClass(options.targetHoverClass);
						});						
						currentObj.removeClass(options.sourceHoverClass);						
						currentObj = null;
						if(selected == true){
							targetSelected.removeClass(options.targetHoverClass);
							targetSelected = null;
							selected = false;
						}						
					}
				}			
			});
		});
		function checkAreaOverride (_cloneDiv,_targetObj){
			//這裏來判斷是否在裏面哦！
			var source_left = _cloneDiv.offset().left;
			var source_top = _cloneDiv.offset().top;
			var source_right = _cloneDiv.offset().left+cloneDiv.innerWidth();
			var source_bottom = _cloneDiv.offset().top+cloneDiv.innerHeight();
			
			var target_left = _targetObj.offset().left;
			var target_top = _targetObj.offset().top;
			var target_right = _targetObj.offset().left+targetObj.innerWidth();
			var target_bottom = _targetObj.offset().top+targetObj.innerHeight();
			
			var new_area_left = max(source_left,target_left);
			var new_area_top = max(source_top,target_top);
			var new_area_right = min(source_right,source_right);
			var new_area_bottom = min(source_bottom,target_bottom);
			if(new_area_left<target_right&&new_area_top<target_bottom&&new_area_right>target_left&&new_area_bottom>target_top){
				$("[class$='jsmartdrag-target-hover']").each(function(){
					$(this).removeClass("jsmartdrag-target-hover");
				});
				return true;
			}else{
				return false;
			}
		}
		function max(_p1,_p2){
			if(_p1>_p2){
				return _p1;
			}else{
				return _p2;
			}
		}
		function min(_p1,_p2){
			if(_p1>_p2){
				return _p2;
			}else{
				return _p1;
			}
		}
		return jQueryObj;
	}; 
})(jQuery);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。