当前位置: 王朝网络 >> html/css/js >> JavaScript 实现拖拽

JavaScript 实现拖拽

王朝html/css/js·作者佚名 2006-12-03

窄屏简体版字體: 小|中|大|超大

由于要实现一些拖拽，主要使用了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>

点击展开全文

上一篇：JS脚本defer的作用

下一篇：使用 javascript 函数完美控制页面图片显示大小 By shawl.qiu

免责声明：本文为网络用户发布，其观点仅代表作者个人观点，与本站无关，本站仅提供信息存储服务。文中陈述内容未经本站证实，其真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

没有找到您想要的？点此查看更多相关文章
相关文章▶

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