王朝网络
分享
 
 
 

JavaScript 实现拖拽

王朝html/css/js·作者佚名  2006-12-03
宽屏版  字体: 小|中|大|超大  

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

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

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

<html>

<head>

<style type="text/css">...

.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>

<script type="text/javascript">...

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 >

<div onmousemove="mouseMove(event)" onmouseup="mouseUp(event)" style="width:1000px;height:800px" >

<DIV class="DragFrame" style=" LEFT: 316px; WIDTH: 120px; TOP: 50px; HEIGHT: 103px; BACKGROUND-COLOR: #ffffff">

<DIV class="header" onmousedown="dragHeader(this,event)" style="CURSOR: move;"><SPAN></SPAN></DIV>

<DIV class="ContentNow" style="HEIGHT: 103px">

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

</DIV>

<DIV id="resizeTest" class="footer" onmousedown="dragFooter(this)" style="CURSOR: n-resize; BOTTOM: -1px">

<SPAN></SPAN>

</DIV>

</DIV>

</div>

</body>

</html>

 
 
 
免责声明：本文为网络用户发布，其观点仅代表作者个人观点，与本站无关，本站仅提供信息存储服务。文中陈述内容未经本站证实，其真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行，买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开？
 干货   2023-08-06
女子4年卖2套房花700多万做美容：不但没变美脸，面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号，网友：不要回答！
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人，苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制（强混乱强眩晕强睡眠）和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情：美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观：鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营：射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山：拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁：鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道：单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野：与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野：李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野：指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵：小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵：千金买邻
 干货   2019-11-12
 
>>返回首页<<
推荐阅读
 
 
频道精选
 
静静地坐在废墟上，四周的荒凉一望无际，忽然觉得，凄凉也很美
© 2005- 王朝网络 版权所有