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 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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之第七天
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
php实现购物车功能(上)
2020/07/23 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Python新手学习函数默认参数设置
2020/06/03 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
关于递归的一道.NET面试题
2013/05/12 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
节能标语大全
2014/06/21 职场文书
队列队形口号
2015/12/25 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android