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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
Node.js Express安装与使用教程
May 11 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 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新手入门学习方法
2011/05/08 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
简单的自定义php模板引擎
2016/08/26 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
VBScript版代码高亮
2006/06/26 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
python定向爬取淘宝商品价格
2018/02/27 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
2014年公司植树节活动方案
2014/03/04 职场文书