jQuery實現拖拽功能 模塊拖拽，基于jQuery的拖拽插件，能夠方便的在Web上實現拖拽功能，同時支持拖拽動作結束之后的的回調方法自己定義。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<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>
jquery.jsmartdrag.js
(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);
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
