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 26 Javascript
jQuery的三种$()
Dec 30 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 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中如何定义和使用常量
2013/02/28 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
vue实现简单的登录弹出框
2020/10/26 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
深入浅析Python字符编码
2015/11/12 Python
Python探索之pLSA实现代码
2017/10/25 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
茶叶店创业计划书范文
2014/01/19 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
优秀纪检干部材料
2014/08/27 职场文书
教师继续教育反思周记
2015/06/25 职场文书