教程集 > 脚本编程 > javascript > 正文 js简单拖动层效果

js简单拖动层效果

发布时间：2017-01-18 编辑：jiaochengji.com

教程集为您提供js简单拖动层效果等资源，欢迎您收藏本站，我们将为您提供最新的js简单拖动层效果资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js简易拖动</title> <style> *{margin:0;padding:0;overflow:hidden} html,body{width:100%;height:100%;} #SeachWin {width:508px;height:324px;overflow:hidden;position:absolute;background-color:#cff;cursor:default;text-align:center;line-height:200px;} #SeachWin tt#SeachTitle{display:block;font-size:12px;height:24px;line-height:26px;padding-left:25px;color:#fff;background-color:#00f;} </style> <script> var IsD=false;//当前是否可以拖动 var marx;//按下左键时光标的X坐标与对话框的X坐标之差 var mary;//按下左键时光标的Y坐标与对话框的Y坐标之差 function MoveDown(event){//按下左键时获取光标的坐标与对话框的坐标之差 if(IsD==false){ var d=document.getElementById("SeachWin"); marx=d.style.left; mary=d.style.top; marx=marx.replace('px',''); mary=mary.replace('px',''); marx=marx-(event.x ? event.x : event.pageX); mary=mary-(event.y ? event.y : event.pageY); } IsD=true; } function move1(event){//改变对话框的坐标实现移动(对话框的坐标=按下左键时获取光标的坐标与对话框的坐标之差移动后的光标坐标) if(IsD==true){ var d=document.getElementById("SeachWin"); var x=eval((event.x ? event.x : event.pageX) marx); var y=eval((event.y ? event.y : event.pageY) mary); if(y<0)y=0; d.style.left=x "px"; d.style.top=y "px"; } } function DocOut(){//鼠标移出body外时，搜索框不能拖动 IsD=false; } //document.onmousemove=move1; //document.onmouseout=DocOut;

<tt id="SeachTitle" onmousedown="MoveDown(event);" onmouseup="IsD=false;//鼠标移出后，搜索框不能拖动" onselectstart="return false" oncontextmenu="window.event.returnValue=false">在此区域按下左键就可以拖动了</tt> 这是一个模拟的对话框

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js简单拖动层效果
 js实现拖动层，兼容IEFireFox
JQuery UI的拖拽功能实现方法小结
 jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
jquery实现鼠标拖动图片效果示例代码
 详解HTML5拖放功能实例
 HTML5 高级教程--拖放 API 实现拖放排序
 Javascript 拖动效果兼容火狐
 jQuery 版元素拖拽原型代码
 jQuery实现可拖动的浮动层完整代码

上一篇：兼容IE，FF弹出遮盖拖动层下一篇：js 感应鼠标变换背景颜色的列表效果

[关闭]

js简单拖动层效果

最近更新

浏览排行