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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
微信小程序实现多图上传
Jun 19 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
jQuery treeview树形结构应用
Mar 24 jQuery
vue实现列表垂直无缝滚动
Apr 08 Vue.js
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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
详解如何运行vue项目
2019/04/15 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
python中return不返回值的问题解析
2020/07/22 Python
Python 解析xml文件的示例
2020/09/29 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
公司前台辞职报告
2014/01/19 职场文书
公司经理任命书
2014/06/05 职场文书
2014年信访工作总结
2014/11/17 职场文书
青年文明号申报材料
2014/12/23 职场文书
关于倡议书的范文
2015/04/29 职场文书
创业计划书之熟食店
2019/10/16 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS