Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 JS 实现拖拽图片效果,JS 实现图标图拖拽,拖拽的过程中不断输出该 div 的 left、top 值,感兴趣的小伙伴们可以参考一下
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;
- }
- }
来源: http://www.phperz.com/article/17/0707/267258.html