原生JS实现拖拽图片效果
2016-02-02 00:00
1201 查看
本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下
javascript event 对象的clientX,offsetX,screenX,pageX的区别:
用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用,
css样式如下:
html代码如下:
js代码及注释如下
以上就是关于js拖拽效果的实现代码,希望对大家的学习有所帮助。
div拖拽插件――JQ.MoveBox.js(***JQ插件)
javascript拖拽上传类库DropzoneJS使用方法
ExtJS的拖拽效果示例
js完美的div拖拽实例代码
鼠标拖拽移动子窗体的JS实现
js拖拽一些常见的思路方法整理
Nodejs+express+html5 实现拖拽上传
js实现拖拽效果
JS弹出可拖拽可关闭的div层完整实例
javascript event 对象的clientX,offsetX,screenX,pageX的区别:
用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用,
css样式如下:
#div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: absolute; cursor: pointer; -webkit-box-shadow: 3px 3px 0px 3px #C7C7C7; box-shadow: 3px 3px 3px 0px #C7C7C7; } #parent{ width: 500px; height: 500px; border: 1px solid #CDCDCD; position: relative; margin: 0 auto; //父级元素设置为: background-color: #F4F4F4; } .postText{ width: 500px; height: 30px;margin: 0 auto; background-color: #F4F4F4; } .postText span{ padding:0px 10px; }
html代码如下:
<div id="parent"> <div id="div1" onmousemove="posMove(this.id)"></div> </div> <div class="postText"> 移动的距离Top:<span id="posTop"></span>Left:<span id="posLeft"></span> </div>
js代码及注释如下
function posMove(getdivid) { var oDiv = document.getElementById(getdivid); var oParent = document.getElementById('parent'); var sent = { l: 10, //设置div在父元素的活动范围,10相当于给父div设置padding-left:10; r: oParent.offsetWidth - oDiv.offsetWidth, // offsetWidth:当前对象的宽度, offsetWidth = width+padding+border t: 10, b: oParent.offsetHeight - oDiv.offsetHeight, n: 10 } drag(oDiv, sent); } /** * * @param obj:被拖动的div * @param sent :设置div在容器中可以被拖动的区域 */ function drag(obj,sent){ var dmW = document.documentElement.clientWidth || document.body.clientWidth; var dmH = document.documentElement.clientHeight || document.body.clientHeight; var sent = sent || {}; var l = sent.l || 0; var r = sent.r || dmW - obj.offsetWidth; var t = sent.t || 0; var b = sent.b || dmH - obj.offsetHeight; var n = sent.n || 10; obj.onmousedown = function (ev){ var oEvent = ev || event; var sentX = oEvent.clientX - obj.offsetLeft; var sentY = oEvent.clientY - obj.offsetTop; document.onmousemove = function (ev){ var oEvent = ev || event; var slideLeft = oEvent.clientX - sentX; var slideTop = oEvent.clientY - sentY; if(slideLeft <= l){ slideLeft = l; } if(slideLeft >= r){ slideLeft = r; } if(slideTop <= t){ slideTop = t; } if(slideTop >= b){ slideTop = b; } obj.style.left = slideLeft + 'px'; obj.style.top = slideTop + 'px'; document.getElementById('posTop').innerHTML = slideTop; document.getElementById('posLeft').innerHTML = slideLeft; }; document.onmouseup = function (){ document.onmousemove = null; document.onmouseup = null; } return false; } }
以上就是关于js拖拽效果的实现代码,希望对大家的学习有所帮助。
您可能感兴趣的文章:
原生js拖拽(第一课 未兼容)拖拽思路div拖拽插件――JQ.MoveBox.js(***JQ插件)
javascript拖拽上传类库DropzoneJS使用方法
ExtJS的拖拽效果示例
js完美的div拖拽实例代码
鼠标拖拽移动子窗体的JS实现
js拖拽一些常见的思路方法整理
Nodejs+express+html5 实现拖拽上传
js实现拖拽效果
JS弹出可拖拽可关闭的div层完整实例
相关文章推荐
- JavaScript通过代码调用Flash显示的方法
- javascript禁止超链接跳转的方法
- JavaScript标签放在HTML的末尾
- js中格式化DATE,javascript中的Prototype属性。
- jsp页面如何使用“EL嵌套"
- JS CORS
- js动态设置margin
- 中级JavaScript例子, 如何实现一个简单实用的模板套用机制, GXTemplate , 第2章(估计要写9章)
- 《mastering-javascripts-this》学习笔记
- 定时器的应用(一):延时提示框
- SSH项目开发中,将jsp页面放在WEB-INF的原因解析
- JS学习--常见弹出框
- String转换Json
- 定时器
- ExtJs表格控件(三)----单元格编辑与提交修改
- 读书笔记 JavaScript高级程序设计 第三章 基本概念-数据类型
- JavaScript第四课——数据类型(Number类型)
- JavaScript 使用
- Js As Ordinal
- JavaScript