DIV 层拖动应用
2008-07-29 09:35
381 查看
DIV 层拖动应用
//外部导入JS源程序(之所以用外部导入的方式，是因为微软在WEB页上用activex控件的时候要求激活控件)
//外部导入文件的方式则不会有此问题
function InitMedioPlay()
{
var d = document.getElementById("objPlay");
if(!d) return;
d.innerHTML = "";
var str="";
str+="<table style=/"width:510px;height:375px/" cellpadding=/"0/" cellspacing=/"0/" class=/"tableleft/">";
str+="<tr style=/"width: 510px;height:20px;background-color:#CCC7BA/">";
str+=" <td style=/"width:485px;height:20px;text-align:center;/">";
str+=" 视频播放窗口";
str+=" </td>";
str+=" <td style=/"width:25px;height:20px;text-align:right;vertical-align:top;/">";
str+=" <img src=/"../images/close.gif/" width=/"20px/" height=/"20px/" border=/"0/" onclick=/"showoff()/" alt=/"/" /> ";
str+=" </td>";
str+="</tr>";
str+="<tr style=/"width: 510px;height:355px/">";
str+=" <td colspan=/"2/" style=/"width:510px;height:375px;text-align:center;vertical-align:middle;border-top-style:inset;border-top-color:#CCC7BA;border-top-width:thin /">";
str+=" <object classid=/"CLSID:10CB7DAE-4BA6-4309-825A-BBF43BD05BB8/" id=/"localPlay/"' width=/"100%/" height=/"100%/" > </object>";
str+=" </td>";
str+="</tr>";
str+="</table> ";
d.innerHTML =str;
}
function $get(id)
{
return (typeof(id)=="object")?id:document.getElementById(id);
}
/*********************************以下为视频播放窗口处理部分********************************/
function OpenWindow()
{
InitMedioPlay();
}
function showoff()
{
$get("objPlay").innerHTML = "";
}
<!--
/***********************视频播放窗口拖动************************/
function beginDrag(elementToDrag,event)
{
//计算元素原左上角与鼠标的距离
//moveHandler要这值
/*计算对象与鼠标之间的距离，x，y坐标*/
var delatX=event.clientX-parseInt(elementToDrag.style.left);
var delatY=event.clientY-parseInt(elementToDrag.style.top);
//注册响应mousemove和mousedown事件后的mouseup事件的处理程序
if(document.addEventListener)
{ //2级DOM事件模型
//注册捕捉事件处理程序
document.addEventListener("mousemove",moveHandler,true); //添加事件，并设置事件的相应顺序 true为先执行 moveHandler()
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent)
{ //IE5+ 的事件模型
/*在IE事件模型中，我们不能捕捉事件，所以只有当事件起泡到这些处理程序时,
它们才被触发. 假设不存在干涉元素, 处理了事件后它们就停止传播*/
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
else
{
//IE4事件模型
//IE4我们不能使用attachEvent方法,所以存储了以前赋予的处理
//程序后,直接赋予新的事件处理程序,这样可以恢复旧的处理程序.
//注意,这样依赖于事件起泡.
var oldmovehandler=document.onmousemove;
var olduphandler=document.onmouseup;
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
}
//我们处理了该事件,不要再让其他元素看见.
if(event.stopPropagation)
event.stopPropagation(); //2 级DOM
else
event.cancelBubble=true; //IE
//下面禁止执行默认动作
if(event.preventDefault)
event.preventDefault(); //2级DOM
else
event.returnValue=false; //IE
/*这是元素被拖动时捕捉mousemove事件的处理程序.
* 它负责移动元素
*/
function moveHandler(e)
{
if(!e)e=window.event; //IE事件模型;
//把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
elementToDrag.style.left=(e.clientX-delatX)+"px"; //e.clientX 鼠标位置
elementToDrag.style.top=(e.clientY-delatY)+"px";
//不要再让其他元素看到该事件.
if(e.stopPropagation)e.stopPropagation(); //2级DOM
else e.cancelBubble=true; //IE
}
/* 这是捕捉拖移结束最后发生的mouseup事件的处理程序.
*/
function upHandler(e)
{
if(!e) e=window.event; //IE事件模型.
//注销捕捉事件程序.
if(document.removeEventListener){//DOM事件模型
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else if(document.detachEvent){//IE5+事件模型
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
else{//IE事件模型
document.onmouseup=olduphandler;
document.onousemove=oldmovehandler;
}
//不要再让事件进一步传播.
if(e.stopPropagation) e.stopPropagation(); //2级DOM
else e.cancelBubble = true; //IE
}
}
在要实现DIV层拖动的WEB页内如下设计：
<html>
<head id="Head1" runat="server">
<title></title>
<script src="JScript.js" language="JScript"></script>
</head>
<body >
<div id="objPlay" style="width:510px;height:375px;position:absolute; left:0px;top:0px;z-index:1;" onmousedown="beginDrag(this,event);" ></div>
</body>
</html>
注意：
position:absolute;
left:0px;top:0px;
z-index:1
这几个设置是必需的。
//外部导入JS源程序(之所以用外部导入的方式，是因为微软在WEB页上用activex控件的时候要求激活控件)
//外部导入文件的方式则不会有此问题
function InitMedioPlay()
{
var d = document.getElementById("objPlay");
if(!d) return;
d.innerHTML = "";
var str="";
str+="<table style=/"width:510px;height:375px/" cellpadding=/"0/" cellspacing=/"0/" class=/"tableleft/">";
str+="<tr style=/"width: 510px;height:20px;background-color:#CCC7BA/">";
str+=" <td style=/"width:485px;height:20px;text-align:center;/">";
str+=" 视频播放窗口";
str+=" </td>";
str+=" <td style=/"width:25px;height:20px;text-align:right;vertical-align:top;/">";
str+=" <img src=/"../images/close.gif/" width=/"20px/" height=/"20px/" border=/"0/" onclick=/"showoff()/" alt=/"/" /> ";
str+=" </td>";
str+="</tr>";
str+="<tr style=/"width: 510px;height:355px/">";
str+=" <td colspan=/"2/" style=/"width:510px;height:375px;text-align:center;vertical-align:middle;border-top-style:inset;border-top-color:#CCC7BA;border-top-width:thin /">";
str+=" <object classid=/"CLSID:10CB7DAE-4BA6-4309-825A-BBF43BD05BB8/" id=/"localPlay/"' width=/"100%/" height=/"100%/" > </object>";
str+=" </td>";
str+="</tr>";
str+="</table> ";
d.innerHTML =str;
}
function $get(id)
{
return (typeof(id)=="object")?id:document.getElementById(id);
}
/*********************************以下为视频播放窗口处理部分********************************/
function OpenWindow()
{
InitMedioPlay();
}
function showoff()
{
$get("objPlay").innerHTML = "";
}
<!--
/***********************视频播放窗口拖动************************/
function beginDrag(elementToDrag,event)
{
//计算元素原左上角与鼠标的距离
//moveHandler要这值
/*计算对象与鼠标之间的距离，x，y坐标*/
var delatX=event.clientX-parseInt(elementToDrag.style.left);
var delatY=event.clientY-parseInt(elementToDrag.style.top);
//注册响应mousemove和mousedown事件后的mouseup事件的处理程序
if(document.addEventListener)
{ //2级DOM事件模型
//注册捕捉事件处理程序
document.addEventListener("mousemove",moveHandler,true); //添加事件，并设置事件的相应顺序 true为先执行 moveHandler()
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent)
{ //IE5+ 的事件模型
/*在IE事件模型中，我们不能捕捉事件，所以只有当事件起泡到这些处理程序时,
它们才被触发. 假设不存在干涉元素, 处理了事件后它们就停止传播*/
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
else
{
//IE4事件模型
//IE4我们不能使用attachEvent方法,所以存储了以前赋予的处理
//程序后,直接赋予新的事件处理程序,这样可以恢复旧的处理程序.
//注意,这样依赖于事件起泡.
var oldmovehandler=document.onmousemove;
var olduphandler=document.onmouseup;
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
}
//我们处理了该事件,不要再让其他元素看见.
if(event.stopPropagation)
event.stopPropagation(); //2 级DOM
else
event.cancelBubble=true; //IE
//下面禁止执行默认动作
if(event.preventDefault)
event.preventDefault(); //2级DOM
else
event.returnValue=false; //IE
/*这是元素被拖动时捕捉mousemove事件的处理程序.
* 它负责移动元素
*/
function moveHandler(e)
{
if(!e)e=window.event; //IE事件模型;
//把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
elementToDrag.style.left=(e.clientX-delatX)+"px"; //e.clientX 鼠标位置
elementToDrag.style.top=(e.clientY-delatY)+"px";
//不要再让其他元素看到该事件.
if(e.stopPropagation)e.stopPropagation(); //2级DOM
else e.cancelBubble=true; //IE
}
/* 这是捕捉拖移结束最后发生的mouseup事件的处理程序.
*/
function upHandler(e)
{
if(!e) e=window.event; //IE事件模型.
//注销捕捉事件程序.
if(document.removeEventListener){//DOM事件模型
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else if(document.detachEvent){//IE5+事件模型
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
else{//IE事件模型
document.onmouseup=olduphandler;
document.onousemove=oldmovehandler;
}
//不要再让事件进一步传播.
if(e.stopPropagation) e.stopPropagation(); //2级DOM
else e.cancelBubble = true; //IE
}
}
在要实现DIV层拖动的WEB页内如下设计：
<html>
<head id="Head1" runat="server">
<title></title>
<script src="JScript.js" language="JScript"></script>
</head>
<body >
<div id="objPlay" style="width:510px;height:375px;position:absolute; left:0px;top:0px;z-index:1;" onmousedown="beginDrag(this,event);" ></div>
</body>
</html>
注意：
position:absolute;
left:0px;top:0px;
z-index:1
这几个设置是必需的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【※】非限定宽度横向滚动应用实例(DIV + CSS、鼠标拖动)
- 文字横向滚动应用实例(DIV + CSS、鼠标拖动)
- Behavior模型应用：可拖动的div容器
- Behavior模型应用：可拖动的div容器
- 文字纵向滚动应用实例(DIV + CSS、鼠标拖动)
- Reporting Service应用技巧(1)—拖动滚动条时保持图表始终显示
- js拖动div实现调换位置
- Android中使用GridView分页显示系统所安装的应用，支持拖动与手势滑动
- div层的拖动(setCapture())
- OA流程设计尝试:Div步骤拖动
- 实现可以拖动的div层
- 栈应用--Codeforces Round #205 (Div. 2)B
- jq div拖动（移动端和pc端）
- 【jquery仿dataList】应用之——模仿igoogle【定制化、拖动排序，最大化、分屏】
- jquery实现很简单的DIV拖动
- 自定义div 拖动。键盘上下左右键移动，ctrl+Q控制是否可以移动，ctrl+回车，返回初始状态
- div拖动
- Codeforces Round #339 (Div. 2)-A. Link/Cut Tree（幂的应用）
- 鼠标拖动改变DIV等网页元素的大小的实现方法
- DIV拖动，水平锁定与垂直锁直