Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)


Posted in Javascript onJanuary 23, 2015

今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能

上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级。原理和之前的一样,简单吧。

html代码:

<div id="div2">
      <div id="div1">

      </div>
    </div>

css代码:

<style type="text/css">
      #div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
      }
      #div2 {
        width: 400px;
        height: 300px;
        background: #CCCCCC;
        position: relative;
      }
    </style>

javascript代码:

<script type="text/javascript">
       // 拖拽空div 低版本的火狐有bug
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          document.onmousemove = function(ev) {
            var oEvent = ev || event;
            // 存储div当前的位置
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;

            if (oDivLeft < 0) {
              oDivLeft = 0;
            } else if (oDivLeft > oDiv2.offsetWidth - oDiv.offsetWidth) {
              oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > oDiv2.offsetHeight - oDiv.offsetHeight) {
              oDivTop = oDiv2.offsetHeight - oDiv.offsetHeight;
            }

            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          };

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; // 阻止默认事件,解决火狐的bug
        };
      };
    </script>

效果图如下:

Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)

简单吧。

接下来就是如何让他自动吸附。

其实这个大家会经常用到,比如ps里面有个小窗拖着拖着到页面边上的时候,他就会自动吸附上去。

我们这个拖拽怎么才能有这样的功能呢?

这其实之前将运动的时候提到过,就好比打车你不可能分毫不差的让司机停在那里,他肯定是停在靠近目的地的地方。

那程序也是一样的,差不多快到了就直接赋值即可。假设我拖拽的物体离左边50px的时候,我就认为他到了左边,那直接赋值为0,他就会自动吸附上去。

原理很简单,看看代码如何实现的吧。稍作修改即可

<script type="text/javascript">
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          document.onmousemove = function(ev) {
            var oEvent = ev || event;
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;


            // 当left 小于50 就自动归0 这样实现吸附
            if (oDivLeft < 50) {
              oDivLeft = 0;
            } else if (oDivLeft > oDiv2.offsetWidth - oDiv.offsetWidth) {
              oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > oDiv2.offsetHeight - oDiv.offsetHeight) {
              oDivTop = oDiv2.offsetHeight - oDiv.offsetHeight;
            }

            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          };

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; 
        };
      };
    </script>

下一次会讲到高级应用,这些会更加的负责更加的有用。已完善我们的拖拽功能。

比如说图片的拖拽和文字的选中。比如说我们现在的这个拖拽页面上就只有一个div,在平时开发中是不会遇到的。

其实在页面上有东西的情况下,这个拖拽会出现什么问题???

下次会解决 ~ 尽请期待

Javascript 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
js正确获取元素样式详解
Aug 07 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
vue中轮训器的使用
Jan 27 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 #Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
jQuery选择器querySelector的使用指南
Jan 23 #Javascript
jQuery中DOM操作实例分析
Jan 23 #Javascript
jquery实现点击页面计算点击次数
Jan 23 #Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 #Javascript
PHP实现的各种中文编码转换类分享
Jan 23 #Javascript
You might like
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
Jquery读取URL参数小例子
2013/08/30 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
netbeans7安装python插件的方法图解
2013/12/24 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python如何给函数库增加日志功能
2020/08/04 Python
python文件排序的方法总结
2020/09/13 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
学校领导班子对照检查材料
2014/08/28 职场文书
庆六一活动总结
2014/08/29 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
办公室岗位职责
2015/02/04 职场文书
信访维稳承诺书
2015/05/04 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
Java spring定时任务详解
2021/10/05 Java/Android
浅析python中特殊文件和特殊函数
2022/02/24 Python