原生JS实现拖拽图片效果


Posted in Javascript onAugust 27, 2020

本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下

javascript event 对象的clientX,offsetX,screenX,pageX的区别:

原生JS实现拖拽图片效果

用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拖拽效果的实现代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
浅析node.js中close事件
Nov 26 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
小程序图片长按识别功能的实现方法
Aug 30 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
基于jquery实现下拉框美化特效
Feb 02 #Javascript
AngularJS自动表单验证
Feb 01 #Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 #Javascript
AngularJS手动表单验证
Feb 01 #Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 #Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 #Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 #Javascript
You might like
PHP会话控制实例分析
2016/12/24 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
numpy添加新的维度:newaxis的方法
2018/08/02 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
numpy库reshape用法详解
2020/04/19 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
门诊挂号室室长岗位职责
2013/11/27 职场文书
会计系中文个人求职信
2013/12/24 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
会计学毕业生求职信
2014/06/25 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
个人委托书范本汇总
2014/10/01 职场文书
政风行风整改报告
2014/11/06 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
教师考核鉴定意见
2015/06/05 职场文书