快捷導(dǎo)航

基于jquery的一個(gè)拖拽到指定區(qū)域內(nèi)的效果

更新時(shí)間：2011年09月21日 15:22:41 作者：

這兩天一直在整這個(gè)拖拽的效果，既然學(xué)習(xí)就要把一個(gè)特效的各個(gè)方面考慮周全，這樣才學(xué)到真正的知識(shí)。可不，又整理了一個(gè) 拖拽的特效。

這個(gè)可與前兩個(gè)不同了，這個(gè)是拖拽到指定的區(qū)域內(nèi)的特效。其實(shí)邏輯方式差不多，只不過不同的是找到目標(biāo)元素，用appendTo 的方法插入到目標(biāo)元素。
具體的代碼如下，有興趣者可以試下。（由于是初學(xué)，做的簡單，如果有其他的方法請(qǐng)給下指點(diǎn)，我定感激不盡哈。。。）

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>測試的拖拽功能</title> 
<style type="text/css"> 
body, div { margin: 0; paading: 0; font-size: 12px; } 
ul, li { margin: 0; padding: 0; list-style: none; } 
.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; } 
.bor2 { padding: 20px 0 0 0; } 
.box { position: static; float: left; width: 200px; height: 800px; margin: 0 auto; margin-top: 15px; } 
.bor { position: static; width: 100px; height: 100px; margin: 0 0 5px 0 ; border: 1px solid #ccc; background: #ececec; } 
.borp { position: absolute; width: 100px; height: 80px; margin: 10px; padding: 10px; border: 1px solid #ccc; background: #ececec; } 
.bg { float:left; width: 100px; height: 100px; margin: 8px 5px 0 auto; padding: 10px; border: 1px solid #ccc; } 
.text2 { width: 200px; } 
.bgColor { border: 1px dashed #f00; } 
</style> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
var move = false; // 移動(dòng)的初始化 
var $bg = $(".bg"); 
var initDiv, tarDiv, tarDivHalf = 0, wHalf = 0; //拖拽對(duì)象 目標(biāo)對(duì)象 
var initPos = {x: 0, y: 0}, relPos = {x: 0, y: 0}, temPos = {x: 0, y: 0}; 
var dragPos = {x1: 0, x2: 0, y1: 0, y2: 0};// 拖拽對(duì)象的四個(gè)坐標(biāo) 
var tarDivPos = {x1: 0, y1: 0, x2: 0, y2: 0}; //目標(biāo)對(duì)象的四個(gè)坐標(biāo) 
$(".bor").each(function() { 
$(this).mousedown(function(event) { 
borSub = $(this).index(); 
initDiv = $(".bor").eq(borSub); //拖拽對(duì)象 
// 鼠標(biāo) 與 目標(biāo)元素的相對(duì)坐標(biāo) 
relPos.x = event.pageX - $(this).offset().left; 
relPos.y = event.pageY - $(this).offset().top; 
move = true; 
}); 
$(document).mousemove(function(event) { 
if (!move) { return false; } 
// 下列代碼是 if(move)的 程序 
initDiv.removeClass("bor").addClass("borp"); 
// 目標(biāo)元素隨鼠標(biāo)移動(dòng)的坐標(biāo) 
dragPos.x1 = event.pageX - relPos.x; 
dragPos.y1 = event.pageY - relPos.y; 
dragPos.x2 = dragPos.x1 + initDiv. innerWidth(); 
dragPos.y2 = dragPos.y1 + initDiv. innerHeight(); 
initDiv.css({ left: dragPos.x1 +'px', top: dragPos.y1 + 'px' }); 
$bg.each(function() { 
tarDiv = $(this); 
// 目標(biāo)對(duì)象的坐標(biāo) 
tarDivPos.x1 = tarDiv.offset().left; 
tarDivPos.x2 = tarDivPos.x1 + tarDiv.width(); 
tarDivPos.y1 = tarDiv.offset().top; 
tarDivPos.y2 = tarDivPos.y1 + tarDiv.height(); 
tarDivHalf = tarDiv.height()/2; //臨時(shí)變量，以便于在if判斷中使用 
wHalf = tarDiv.width()/2; 
if (dragPos.x2 >= tarDivPos.x1 + wHalf && dragPos.x2 <= tarDivPos.x2 + wHalf && dragPos.y2 >= tarDivPos.y1 + tarDivHalf && dragPos.y2 <= tarDivPos.y2 + tarDivHalf ) { 
if(tarDiv.children().length >0 ) {return false;}// 解決重疊元素 移動(dòng)到一個(gè)目標(biāo)元素 
tarDiv.removeClass("bg").addClass("bg bgColor"); 
} else { 
tarDiv.removeClass("bgColor"); 
} 
}); 
}).mouseup (function(event) { 
initDiv.appendTo($(".bgColor"));// 利用 apppendTo 方法 使拖動(dòng)元素對(duì)象添加到指定的區(qū)域。 
initDiv.removeClass("borp").addClass("bor").removeAttr("style"); //恢復(fù)拖拽對(duì)象初始的樣式 
move = false; 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="box"> 
<div class="bor">bor1</div> 
<div class="bor">bor2</div> 
<div class="bor">bor3</div> 
</div> 
<div class="box2"> 
<div class="bg" id="bg1"></div> 
<div class="bg" id="bg2"></div> 
<div class="bg" id="bg3"></div> 
<div class="bg" id="bg4"></div> 
<div class="bg" id="bg5"></div> 
<div class="bg" id="bg6"></div> 
<div class="bg" id="bg7"></div> 
<div class="bg" id="bg8"></div> 
<div class="bg" id="bg9"></div> 
<div class="bg" id="bg10"></div> 
<div class="bg" id="bg11"></div> 
<div class="bg" id="bg12"></div> 
<div class="bg" id="bg13"></div> 
<div class="bg" id="bg14"></div> 
<div class="bg" id="bg15"></div> 
<div class="bg" id="bg16"></div> 
<div class="bg" id="bg17"></div> 
<div class="bg" id="bg18"></div> 
<div class="bg" id="bg19"></div> 
<div class="bg" id="bg20"></div> 
<div class="bg" id="bg21"></div> 
<div class="bg" id="bg22"></div> 
<div class="bg" id="bg23"></div> 
<div class="bg" id="bg24"></div> 
<div class="bg" id="bg25"></div> 
<div class="bg" id="bg26"></div> 
<div class="bg" id="bg27"></div> 
<div class="bg" id="bg28"></div> 
<div class="bg" id="bg29"></div> 
<div class="bg" id="bg30"></div> 
<div class="bg" id="bg31"></div> 
<div class="bg" id="bg32"></div> 
<div class="bg" id="bg33"></div> 
<div class="bg" id="bg34"></div> 
<div class="bg" id="bg35"></div> 
<div class="bg" id="bg36"></div> 
<div class="bg" id="bg37"></div> 
<div class="bg" id="bg38"></div> 
<div class="bg" id="bg39"></div> 
</div> 
<div class="clear"></div> 
</body> 
</html> 