javascript 拖动效果
文章来源:http://jiarry.blogchina.com/4843957.html
关键词： javascript 拖动 拖拽 移动层
JavaScript中如何实现对层的控制，移动和拖动？现在个性化的界面越来越多，一个能随意拖放物件的个性化页面将会很受欢迎。随着WEB2.0的发展，网页界面技术将得到充分发展，越来越多的程序员开始认识到，程序不只是为后台而开发，而应该是前端与后台的结合。结合完美的产品才是符合用户城需求的，才能给用户带去丰富的体验。让B/S模式也能体现C/S模式的丰富与便捷将会是一个发展趋势。下面这个例子就是一个简单的拖动实例，类似于lovewall.net上的拖动，但功能要健全一些，适合各种浏览器，可以置底，置顶，删除。
下面开始我们的步骤，
1，在页面上添加一个div，代码如下，这里用来拖动的实体。注意class,rel,id,mousedown事件等等要完整。这样的代码可以复制多份，id号可以是darg2,darg3...，style定义可以根据需要来写。
<div class="da" ><span class="x">x</span>拖动区1.</div>
文字1
</div>
2，在head区域添加style
<style type="text/css">
<!--
.drag{position:absolute;width:200px; background-color:green;height:120px;z-index:1;}
.da{width:100%;height:20px;background-color:black;color:white;cursor:move;}
.x{float:right;color:red;cursor:pointer;}
-->
</style>
3，在网页body的最后面添加下面的js代码。
<script type="text/javascript">
var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//
var x, y,rw,rh;
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++){
if(divs[i].getAttribute("rel")=="drag"){
divs[i].onmousemove=function(){
thismove(this);//实时得到当前对象与鼠标的值以判断拖动及关闭区域;
}
/*
var c=1;if(document.all)c=0;
divs[i].childNodes[c].onmousedown=function(){
dargit(this,event);
}
*/
//divs[i].onmousedown=function(){
// st(this);
//}
}
}
function thismove(o){
rw=parseInt(x)-parseInt(o.style.left);
rh=parseInt(y)-parseInt(o.style.top);
document.title=rw+"=文本区域="+rh;
if(rh<=20 && rw>=180)document.title=rw+"||20*20||"+rh;//右上角20*20的关闭区域
if(rh<=20 && rw<180 )document.title=rw+"||可选||"+rh;//绝对拖动条选择区域;
}
function dargit(o,e){
thiso = o;
canDrg = true;
if(!document.all){
lx = e.clientX; ly = e.clientY;
}else{
lx = event.x; ly = event.y;
}
if(document.all) thiso.setCapture();
st(o);//置前或置后
}
document.onmousemove = function(e){
if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
if(canDrg){
//if(rh<=20 && rw<180 ){//如果要设定拖动区域可以作判断
var ofsx = x - lx;
thiso.style.left = parseInt(thiso.style.left) + ofsx;
lx = x;
var ofsy = y - ly;
thiso.style.top = parseInt(thiso.style.top) + ofsy;
ly = y;
//}else{canDrg=false;}
}
}
document.onmouseup=function(){
canDrg=false;//拖拽变量设为false
if(document.all && thiso != null){
//ie下，将清捕获;
thiso.releaseCapture();
thiso = null;
}
}
function set(obj){
obj=obj.parentNode.parentNode;
if(obj.getAttribute("rel"));
//obj.style.zIndex=1;
}
function st(o){
var p = o.parentNode;
if(p.lastChild != o){
p.appendChild(o);
}
if(rh<=20 && rw>=180){
canDrg=false;
//如果选择的是关闭区域;
window.status=rw+"|"+rh;
if(p.firstChild == o) return;
p.insertBefore(o, p.firstChild);
}
}
</script>
function thismove(o){
rw=parseInt(x)-parseInt(o.style.left);
rh=parseInt(y)-parseInt(o.style.top);
document.title=rw+"=文本区域="+rh;
if(rh<=20 && rw>=180)document.title=rw+"||20*20||"+rh;//右上角20*20的关闭区域
if(rh<=20 && rw<180 )document.title=rw+"||可选||"+rh;//绝对拖动条选择区域;
}
function dargit(o,e){
thiso = o;
canDrg = true;
if(!document.all){
lx = e.clientX; ly = e.clientY;
}else{
lx = event.x; ly = event.y;
}
if(document.all) thiso.setCapture();
st(o);//置前或置后
}
document.onmousemove = function(e){
if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
if(canDrg){
//if(rh<=20 && rw<180 ){//如果要设定拖动区域可以作判断
var ofsx = x - lx;
thiso.style.left = parseInt(thiso.style.left) + ofsx;
lx = x;
var ofsy = y - ly;
thiso.style.top = parseInt(thiso.style.top) + ofsy;
ly = y;
//}else{canDrg=false;}
}
}
document.onmouseup=function(){
canDrg=false;//拖拽变量设为false
if(document.all && thiso != null){
//ie下，将清捕获;
thiso.releaseCapture();
thiso = null;
}
}
function set(obj){
obj=obj.parentNode.parentNode;
if(obj.getAttribute("rel"));
//obj.style.zIndex=1;
}
function st(o){
var p = o.parentNode;
if(p.lastChild != o){
p.appendChild(o);
}
if(rh<=20 && rw>=180){
canDrg=false;
//如果选择的是关闭区域;
window.status=rw+"|"+rh;
if(p.firstChild == o) return;
p.insertBefore(o, p.firstChild);
}
}
</script>
3，在网页body的最后面添加下面的js代码。
<script type="text/javascript">
var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//
var x, y,rw,rh;
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++){
if(divs[i].getAttribute("rel")=="drag"){
divs[i].onmousemove=function(){
thismove(this);//实时得到当前对象与鼠标的值以判断拖动及关闭区域;
}
/*
var c=1;if(document.all)c=0;
divs[i].childNodes[c].onmousedown=function(){
dargit(this,event);
}
*/
//divs[i].onmousedown=function(){
// st(this);
//}
}
}
function thismove(o){
rw=parseInt(x)-parseInt(o.style.left);
rh=parseInt(y)-parseInt(o.style.top);
document.title=rw+"=文本区域="+rh;
if(rh<=20 && rw>=180)document.title=rw+"||20*20||"+rh;//右上角20*20的关闭区域
if(rh<=20 && rw<180 )document.title=rw+"||可选||"+rh;//绝对拖动条选择区域;
}
function dargit(o,e){
thiso = o;
canDrg = true;
if(!document.all){
lx = e.clientX; ly = e.clientY;
}else{
lx = event.x; ly = event.y;
}
if(document.all) thiso.setCapture();
st(o);//置前或置后
}
document.onmousemove = function(e){
if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
if(canDrg){
//if(rh<=20 && rw<180 ){//如果要设定拖动区域可以作判断
var ofsx = x - lx;
thiso.style.left = parseInt(thiso.style.left) + ofsx;
lx = x;
var ofsy = y - ly;
thiso.style.top = parseInt(thiso.style.top) + ofsy;
ly = y;
//}else{canDrg=false;}
}
}
document.onmouseup=function(){
canDrg=false;//拖拽变量设为false
if(document.all && thiso != null){
//ie下，将清捕获;
thiso.releaseCapture();
thiso = null;
}
}
function set(obj){
obj=obj.parentNode.parentNode;
if(obj.getAttribute("rel"));
//obj.style.zIndex=1;
}
function st(o){
var p = o.parentNode;
if(p.lastChild != o){
p.appendChild(o);
}
if(rh<=20 && rw>=180){
canDrg=false;
//如果选择的是关闭区域;
window.status=rw+"|"+rh;
if(p.firstChild == o) return;
p.insertBefore(o, p.firstChild);
}
}
</script>
4，添加完上面的部分就是完成了基本的功能了，具体效果可以查看darg_ok.html,高级点的功能可以查看darg_ok1.html，还可以查看php+mysql版的lovewall全部源代码,asp版的可以去爱墙获取，不过我的版本功能更强大些。
谢谢观看本文章，由于时间仓促，整理得也不够仔细，这主要是给自己的过程作个记录。希望某天用时好找一点而已
谢谢观看本文章，由于时间仓促，整理得也不够仔细，这主要是给自己的过程作个记录。希望某天用时好找一点而已
- 评论人：jarry 2006-04-14 18:06:06
|
||||
|
拖动效果实例 |
||||
- 评论人：morning 2006-04-14 18:00:37
|
||||
|
http://lslnx.zsu.edu.cn/webspace/78229/personel_web/jiarry/resources/darg/drag_ok1.html |
||||
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=831333
