JavaScript:Div层拖动效果实例代码


Posted in Javascript onAugust 06, 2013

Div层拖动效果图:

JavaScript:Div层拖动效果实例代码

JavaScript:Div层拖动效果实例代码

实现:
CSS:

<style>
div
{
position:relative;
}
</style>

JS:
<script type="text/javascript"> 
var mouseover=true
var xcoor;
var ycoor;
function coordinates()
{if (event.srcElement.id.indexOf("wishbroad") == 0)
    {
    event.srcElement.style.zIndex = 1000;
    mouseover=true;
    pleft=event.srcElement.style.pixelLeft;
    ptop=event.srcElement.style.pixelTop;
    xcoor=event.clientX;
    ycoor=event.clientY;
    document.onmousemove=moveImage;
    }
}
function moveImage()
{
if (mouseover&&event.button==1)
    {
    event.srcElement.style.pixelLeft=pleft+event.clientX-xcoor;
    event.srcElement.style.pixelTop=ptop+event.clientY-ycoor;
    return false;
    }
}
function mouseup()
{
    event.srcElement.style.zIndex = 1;
    mouseover=false;
}
document.onmousedown=coordinates;
document.onmouseup=mouseup;
</script>

HTML:
<html>
<head>Div层拖动</head>
<body>
<div id="wishbroad1" style="width:200px; height:100px;border:1px solid black;background:gray;">
中国
</div>
<div id="wishbroad2" style="width:200px; height:100px;border:1px solid red;background:red;">
美国
</div>
<div id="wishbroad3" style="width:200px; height:100px;border:1px solid red;background:green;">
日本
</div>
<div id="wishbroad4" style="width:200px; height:100px;border:1px solid red;background:pink;">
巴西
</div>
</body>
</html>
Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 #Javascript
jquery弹出关闭遮罩层实例
Aug 06 #Javascript
jquery批量控制form禁用的代码
Aug 06 #Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 #Javascript
intro.js 页面引导简单用法 分享
Aug 06 #Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 #Javascript
IE下JS读取xml文件示例代码
Aug 05 #Javascript
You might like
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
跟随鼠标旋转的文字
2006/11/30 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python subprocess库的使用详解
2018/10/26 Python
python实现三次样条插值
2018/12/17 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
《鲁班和橹板》教学反思
2014/04/27 职场文书
数学教育专业求职信
2014/07/22 职场文书
教师考核鉴定意见
2015/06/05 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏