类似Google拖拽效果
Google拖拽效果[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<style type="text/css" />
body {
background-color: white;
}
#left {
width: 600px;
float: left;
}
#right {
width: 300px;
float: left;
}
.column {
width: 290px;
float: left;
padding-bottom: 10px;
}
.dragMod {
display: block;
width: 280px;
background-color: #eef;
border: #A00 dashed 2px;
filter : progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=30,finishOpacity=100);
opacity: 0.3;
}
.dragingMod {
display: block;
width: 280px;
background-color: #fee;
filter : progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=50,finishOpacity=100);
opacity: 0.5;
}
.module {
display: block;
width: 280px;
background-color: #fff;
}
.modTitle {
background-color: white;
width: 270px;
padding: 2px 2px 2px 2px;
border: #600 solid 1px;
cursor: move;
display: block;
height: 21px;
}
.modTitleLeft {
width: 260px;
float: left;
}
.modTitleRight {
float: left;
}
.modTitleRight a{
text-decoration: none;
}
.modContent {
margin-bottom: 20px;
}
.specmod {
border: #060 solid 2px;
}
.scoreBox *{
padding: 0;
margin: 0;
}
.scoreBox {
clear:both;
width: 150px;
border: #eee solid 3px;
background-color: #fff;
height: auto;
}
.scoreText {
font-size:12px;
width: 35px;
}
.scoreBar {
width:110px;
border: #eee solid 1px;
}
.scoreBar div {
margin: 2px;
height: 6px;
overflow: hidden;
background-color: #d00;
width: 100px;
}
#topMenu {
text-align: center;
}
.subMenu {
display: none;
}
</style>
<script type="text/javascript">
var utility = {
/* function getPostion */
/* PARAM: e: object */
/* RETURN: e's position in document */
getPosition : function (e)
{
var left = 0;
var top = 0;
while (e!=null)
{
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
return {x:left, y:top};
}
}
var eventManager = function (){
var m_events = {};
this.attachEvent = function (handleName, handleFunc){
m_events[handleName] = handleFunc;
}
this.detachEvent = function (handleName){
m_events[handleName] = null;
}
this.fire = function (){
for(var handleName in m_events)
{
if (m_events[handleName])
{
m_events[handleName].apply(this, arguments);
}
}
}
}
var Animate = function (startPos, endPos, steps, timeval, obj, endFunc){
var m_steps = steps||0;
var m_done;
var m_timeval = timeval||0;
var m_startPos = startPos||{x:0, y:0};
var m_endPos = endPos||{x:0, y:0};
var m_step = {x:0, y:0};
var m_timer = null;
var m_obj = obj||null;
var m_this = this;
var m_endFunc = endFunc||null;
this.doing = false;
this.init = function (startPos, endPos, steps, timeval, obj, endFunc){
m_steps = steps||0;
m_timeval = timeval||0;
m_startPos = startPos||{x:0, y:0};
m_endPos = endPos||{x:0, y:0};
m_timer = null;
m_obj = obj||null;
m_endFunc = endFunc||null;
}
function going(){
if (!m_timer) return;
m_done++;
if (m_done < m_steps)
{
m_obj.style.left = parseInt(m_startPos.x+m_done*m_step.x)+"px";
m_obj.style.top = parseInt(m_startPos.y+m_done*m_step.y)+"px";
}
else
{
clearInterval(m_timer);
m_this.doing = false;
if (m_endFunc)
m_endFunc();
}
}
this.start = function (){
if (m_obj&&m_obj.style)
m_obj.style.position = "absolute";
m_step.x = (m_endPos.x - m_startPos.x)/m_steps;
m_step.y = (m_endPos.y - m_startPos.y)/m_steps;
m_done = 0;
this.doing = true;
m_timer = setInterval(going, m_timeval);
}
}
var dragdrop = function (){
var dropList = [];
var dragOffset = {x:0, y:0};
var dragDropping = null;
var dragObject = null;
var dragInsert = null;
var dragHelper = null;
var dragAnimate = new Animate();
/* function getdragOffsetset */
/* PARAM: target: object */
/* ev: event */
/* RETURN: target's postion offset to mouse position */
function getdragOffsetset(target, ev)
{
ev = ev || window.event;
var docPos = utility.getPosition(target);
var mousePos = {x:ev.clientX + document.documentElement.scrollLeft,
y:ev.clientY + document.documentElement.scrollTop};
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
/* function makeDraggable */
/* PARAM: item: draggable item */
/* RETURN: N/A */
function makeDraggable(item)
{
if(!item) return;
/* event handle for drag start */
item.onmousedown = function (ev)
{
if (dragAnimate.doing) return;
var thisP = this.parentNode;
var objPos = utility.getPosition(this);
/* copy the drag object to dragHelper */
dragObject = dragHelper;
dragObject.style.position = "absolute";
dragObject.style.top = objPos.y+"px";
dragObject.style.left = objPos.x+"px";
dragObject.innerHTML = thisP.innerHTML;
dragObject.style.display = "block";
dragObject.className =
thisP.className.replace("module", "dragingMod");
/* record drag offset */
dragOffset = getdragOffsetset(this, ev);
thisP.className = thisP.className.replace("module", "dragMod");
dragDropping = thisP;
return false;
}
}
function makeDropList(item)
{
/* push item in to dropable item list */
dropList.push(item);
}
/* function dropIt -- drop item in the drop container */
/* PARAM: dropArea: drop container, mousePos: mouse position */
/* RETURN: N/A */
function dropIt(dropArea, mousePos)
{
var chd;
for(var i = 0; i < dropArea.childNodes.length; i++)
{
chd = dropArea.childNodes[i];
if(!chd||!(chd.className)||chd.className.indexOf('module')==-1)
continue;
var chdPos = utility.getPosition(chd);
var linePos = chdPos.y + chd.offsetHeight/2;
if (linePos > mousePos.y)
{
if (chd != dragInsert)
{
/*insert*/
dropArea.insertBefore(dragDropping, chd);
dragInsert = chd;
}
return;
}
}
if (dragInsert != dropArea)
{
/* insert into the end */
dropArea.insertBefore(dragDropping, null);
dragInsert = dropArea;
}
}
/* test drop to which container */
function testDrop(mousePos)
{
for(var i=0; i < dropList.length; i++)
{
var dropArea = dropList[i];
var pos = utility.getPosition(dropArea);
if ((mousePos.x > pos.x)&&
(mousePos.x < pos.x+dropArea.offsetWidth))
{
dropIt(dropArea, mousePos);
return;
}
}
}
/* init dragable items and dropable list */
this.init = function (dragName, dropName)
{
var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++)
{
if (divs[i].className == dragName)
makeDraggable(divs[i]);
if (divs[i].className == dropName)
makeDropList(divs[i]);
}
dragHelper = document.createElement('DIV');
dragHelper.style.cssText = 'position:absolute;display:none;';
document.body.appendChild(dragHelper);
};
this.mouseMove = function (ev)
{
if (dragAnimate.doing) return;
ev = ev || window.event;
if(dragObject)
{
var mousePos = {x:ev.clientX + document.documentElement.scrollLeft,
y:ev.clientY + document.documentElement.scrollTop};
dragObject.style.position = "absolute";
dragObject.style.top = (mousePos.y - dragOffset.y)+"px";
dragObject.style.left = (mousePos.x - dragOffset.x)+"px";
testDrop(mousePos);
}
return false;
};
function startAnimate()
{
function endAnimate()
{
dragObject.innerHTML = "";
dragObject.style.display = "none";
dragObject = null;
dragDropping.className =
dragDropping.className.replace("dragMod", "module");
}
var endPos = utility.getPosition(dragDropping);
var startPos = {};
startPos.x = parseInt(dragObject.style.left);
startPos.y = parseInt(dragObject.style.top);
dragAnimate.init(startPos, endPos, 20, 3, dragObject, endAnimate);
dragAnimate.start();
}
this.mouseUp = function (ev){
if (dragAnimate.doing) return;
if (dragObject)
{
startAnimate();
}
return false;
};
}
var dragIt = new dragdrop();
var onMouseMv = new eventManager();
var onMouseU = new eventManager();
onMouseMv.attachEvent("mouseMove", dragIt.mouseMove);
onMouseU.attachEvent("mouseUp", dragIt.mouseUp);
document.onmousemove = onMouseMv.fire;
document.onmouseup = onMouseU.fire;
window.onload = function (){dragIt.init("modTitle", "column");};
var mouseOverMenu = function (ev) {
if(!this||!this.childNodes) return;
for(var i in this.childNodes)
{
if(this.childNodes[i]&&this.childNodes[i].className&&
this.childNodes[i].className=="subMenu")
{
var pos = utility.getPosition(this);
this.childNodes[i].style.display = "block";
this.childNodes[i].style.position = "absolute";
this.childNodes[i].style.left = pos.x+this.offsetWidth/3*2+"px";
this.childNodes[i].style.top = pos.y+"px";
}
}
}
var mouseOutMenu = function (ev) {
if(!this||!this.childNodes) return;
for(var i in this.childNodes)
{
if(this.childNodes[i]&&this.childNodes[i].className&&
this.childNodes[i].className=="subMenu")
{
this.childNodes[i].style.display = "none";
}
}
}
var menu1 = document.getElementById("topMenu");
menu1.onmouseover = mouseOverMenu;
menu1.onmouseout = mouseOutMenu;
</script>
</head>
<body>
<div id="page">
<div style="height: 100px;width: 100%;">
</div>
<div id="left">
<div class="column" id="col1">
<div class="module" inside="mod1">
<div class="modTitle">
<div class="modTitleLeft">
hi1
</div>
</div>
<div class="modContent">
<div id="topMenu">Captain tsubasa
<div class="subMenu">
<table class="scoreBox">
<tr><td class="scoreText">aa</td><td class="scoreBar"><div> </div></td></tr>
<tr><td class="scoreText">bb</td><td class="scoreBar"><div> </div></td></tr>
<tr><td class="scoreText">cc</td><td class="scoreBar"><div> </div></td></tr>
</table>
</div>
</div>
</div>
</div>
<div class="module" inside="mod2">
<div class="modTitle">
<div class="modTitleLeft">
hi2
</div>
</div>
<div class="modContent">
there
</div>
</div>
</div>
<div class="column">
<div class="module" inside="mod3">
<div class="modTitle">
<div class="modTitleLeft">
hi3
</div>
</div>
<div class="modContent">
there
</div>
</div>
<div class="module specmod" inside="mod4">
<div class="modTitle">
<div class="modTitleLeft">
hi4
</div>
</div>
<div class="modContent">
there
</div>
</div>
</div>
</div>
<div id="right">
<div class="column">
<div class="module" inside="mod5">
<div class="modTitle">
<div class="modTitleLeft">
hi5
</div>
</div>
<div class="modContent">
there
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]
页:
[1]