使用JS实现拖动 BBCode版

最新推荐文章于 2023-12-01 17:02:03 发布

yueguangyuan

最新推荐文章于 2023-12-01 17:02:03 发布

阅读量104

点赞数

分类专栏： Ruby on Rails & Ajax 文章标签： Firefox IE Rails PHP JavaScript ViewUI

Ruby on Rails & Ajax 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这是我在07年上半年参与的一个项目（全部采用Rails实现，www.bocai188.com/forum，只是网站没人气，公司也不打算在上面扔钱了，呵呵）制作的页面拖动框，用于模仿JavaEye登陆框的效果，第一次记录的时候还有一些问题，经过修改后，已经将pixel，alpha问题改掉，将代码整理了一下上传上来，整个东西就可以直接用了 :lol:

==================================================================
学习了一下用JavaScript实现拖动效果，找来网上的代码分析了一下然后照抄了个最简单的，将慢慢将它完善

现状：目前还不支持FireFox

不支持项（已知项）：pixelLeft、pixelTop、alpha(opacity=90)

[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Drag </TITLE>
<style>
*{font-size:12px}
.dragTable{
font-size:12px;
border-top:1px solid #3366cc;
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
.dragTR{
cursor:move;
color:#7787cc;
background-color:#e5eef9;
}
td{vertical-align:top;}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</style>
<script language="JavaScript" type="text/javascript">
/** 判断浏览器类型 */
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
/** 目标面板 */
var tarElement=null;
/** 实际被拖动面板 */
var dragElement=null;
/** 定义元素位置 */
var downX,downY,tmp_o_x,tmp_o_y;

var refElement=null;
var dragActive=0;
/** 是否在移动中 1为是 */
var draging=0;

function getEventElement (event){
if(event == null){
event = window.event;
}
return (event.srcElement ? event.srcElement : event.target);
}

/**
* onMouseDown触发事件
*/
function readyDrag(event) {
dragActive = 1;

var eventObj = getEventElement(event);
// 非DIV元素不能被拖动
if(eventObj.tagName != "DIV") return;

// 将目标元素附给dragElement
dragElement = eventObj.parentNode;
// 复制一个tmpElement到目标面板
tarElement = dragElement.cloneNode(true);
setOpcity(tarElement,50);

tarElement.style.zIndex=2;
dragElement.style.zIndxe=1;
tarElement.style.position="absolute";

if(dragElement.parentNode.tagName != "BODY"){
// 当选中可拖动元素时,初始化拖动元素的初始位置
// TODO pixelLeft仅被IE支持
dragElementdragElement.style.left = dragElement.offsetLeft + getLeft(dragElement.parentNode);
dragElementdragElement.style.top = dragElement.offsetTop + getTop(dragElement.parentNode);
}

//取得当前鼠标的绝对位置
downX=event.clientX;
downY=event.clientY;
//取得拖动元素当前的绝对位置

tmp_o_x=getLeft(dragElement);
tmp_o_y=getTop(dragElement);
tarElement.style.display="none";
document.body.appendChild(tarElement);
document.οnmοusemοve=startDrag;
}

document.οnmοuseup=endDrag;

function getLeft(obj){
if(isMSIE){
value = obj.style.pixelLeft;
}else{
value = parseInt(obj.style.left, 10);
}
return value;
}

function setOpcity(obj,value){
// alpha(opacity=50)仅被IE支持
if(isMSIE){
obj.style.filter="alpha(opacity="+value+")";
}else{
obj.style.MozOpacity=value*0.01;
}
}

function getTop(obj){
if(isMSIE){
value = obj.style.pixelTop;
}else{
value = parseInt(obj.style.top, 10)
}
return value;
}

/**
* onMouseOver事件触发
*/
function startDrag(event){
var flag = false;
if(isMSIE){
event = window.event;
if(event.button==1){
flag=true;
}
}else{
if(event.button==0){
flag=true;
}
}
if(dragActive==1&&flag&&dragElement!=null&&tarElement!=null){
//当拖动动作进行、mouse button pressed、拖动物件存在、目标面板存在的情况下
tarElement.style.display="block";
tarElement.style.left=tmp_o_x+event.clientX-downX;
tarElement.style.top=tmp_o_y+event.clientY-downY;
dragElement.style.backgroundColor="#CCCCCC";
//游标样式
document.body.style.cursor="move";
draging=1;
}
}

/**
* onMouseUp时间触发
*/
function endDrag(event){
if(dragActive==1&&tarElement!=null){
//当拖动动作进行、目标面板存在的情况下
if(draging==1){
// 如果面板处于移动状态中，将原有面板移除
if(isMSIE){
dragElement.removeNode(true);
}else{
dragElement.removeChild(node);
}
draging=0;
}

setOpcity(tarElement,100);
tarElement.style.zIndex=1;
document.body.style.cursor="default";
}

dragElement=null;
tarElement=null;
dragActive=0;
}
</script>
</HEAD>

<BODY>
<div id="div_one" class="div_one" style="position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;">
<div onMouseDown="readyDrag(event)" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar">
Window
</div>
<div class="textSheet" style="border:1px solid #996666;">Content<br></div>
</div>
</BODY>
</HTML>
[/code]

目前这个代码段无法在FireFox上运行，其中pixelleft是肯定无法在FireFox上执行，所以在网上找来了这个东西：
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
和
http://www.firefox.net.cn/newforum/viewtopic.php?p=33357
貌似有效果

http://www.spacespace.cn/read.php?148 通过搜索又发现了这个IE和FireFox下常见的不兼容处理办法，貌似透明度的问题也可以解决咯

yueguangyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JS实现拖动 BBCode版

这是我在07年上半年参与的一个项目（全部采用Rails实现，www.bocai188.com/forum，只是网站没人气，公司也不打算在上面扔钱了，呵呵）制作的页面拖动框，用于模仿JavaEye登陆框的效果，第一次记录的时候还有一些问题，经过修改后，已经将pixel，alpha问题改掉，将代码整理了一下上传上来，整个东西就可以直接用了 :lol: ==================...
复制链接

扫一扫

专栏目录