原生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 相关文章推荐
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 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 clearstatcache()函数详解
2010/03/02 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
JS实现倒计时图文效果
2018/11/17 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
python django事务transaction源码分析详解
2017/03/17 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python中的asyncio代码详解
2019/06/10 Python
Python标准库itertools的使用方法
2020/01/17 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
C语言面试题
2015/10/30 面试题
用友笔试题目
2016/10/25 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
幼儿老师求职信
2014/06/30 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技