JavaScript 实现拖拽 - 王朝网络宽屏版

由于要实现一些拖拽，主要使用了prototpye.js,于是就使用了dragdrop.js, 在使用以前自己写了个简单拖拽，个人觉得原理是一致的。

1 对需要拖拽的部分处理mousedown事件，目的就是定为该object的parent

2 在其容器内处理处理mousemove，mouseup mousemove目的就是规定移动的动作，mouseup的目的就是释放当前的操作object，以可以实现下次的拖拽动作。

<html>

<head>

.DragFrame{...}{

position:absolute;

border:1px solid #000;

overflow:hidden;

}

.header{...}{

height:4px;

background-color:#00F;

}

.ContentNow{...}{

font-size:0.7em;

font-family:arial;

padding:2px;

padding-top:5px;

overflow:hidden;

}

.footer{...}{

position:absolute;

bottom:-1px;

border-top:1px solid #000;

height:4px;

width:100%;

font-size:0.8em;

background-color:red;

}

</style>

var dragObject = false;

var dragheader = false;

var dragfooter = false;

var orignalLength = 0;

function dragHeader(obj,ev)

...{

dragheader = true;

dragObject = obj.parentNode;

var dragLeft = dragObject.style.left.replace('px','')/1;

e = ev;

orignalLength = e.clientX-dragLeft;

return false;

}

function dragFooter(obj)

...{

dragObject = obj.parentNode;

dragfooter = true;

return false;

}

function mouseUp(e)

...{

if(!dragObject)return;

dragObject = false;

dragheader = false;

dragfooter = false;

orignalLength = 0;

}

function mouseMove(e)

...{

if(document.all) e = event;

if(!dragObject)return;

var dragTop;

var dragLeft;

var tmpHeight;

if( dragfooter )

...{

dragTop = dragObject.style.top.replace('px','')/1;

tmpHeight = e.clientY - dragTop;

dragObject.style.height = tmpHeight + 'px';

}

if( dragheader )

...{

dragTop = dragObject.style.top.replace('px','')/1;

dragLeft = dragObject.style.left.replace('px','')/1;

//if(orignalLength > e.clientX-dragLeft)

dragLeft = dragLeft+(e.clientX-dragLeft);

// else

// dragLeft = dragLeft-(e.clientX-dragLeft);

dragObject.style.top = e.clientY + 'px';

dragObject.style.left = e.clientX+ 'px';

}

</script>

</head>

<body >

<SPAN>Drag header or Drag the bottom!</SPAN>

</DIV>

</DIV>

</div>

</body>

</html>