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 相关文章推荐
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
Javascript实现字数统计
Jul 03 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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支持页面回退的两种方法
2008/01/10 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
Javascript堆排序算法详解
2014/12/03 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
简析Python的闭包和装饰器
2016/02/26 Python
python实现各进制转换的总结大全
2017/06/18 Python
Django中的Signal代码详解
2018/02/05 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
女性时尚在线:IVRose
2019/02/23 全球购物
药品促销活动方案
2014/02/14 职场文书
办公设备采购方案
2014/03/16 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
Python List remove()实例用法详解
2021/08/02 Python