拖拽效果实现原理

  拖拽,主要用到onmousedown、onmouseover、onmouseup

  拖拽的流程:(1)先点击

        (2)在点下的物体被选中,进行move移动

        (3)抬起鼠标,停止移动

  【注】点击某个物体时,用oDiv即可,move和up是全局区域,也就是整个文档通用,应该用document。

  

    oDiv.onmousedown = function(){
        document.onmousemove = function(){
            var e = e || window.event;
            var diffX = e.clientX - oDiv.offdsetLeft;
            var diffY = e.clientY - oDiv.offdsettop;

            var _this = this;

            _this.style.left = e.clientX - diffX + ‘px‘;     // 鼠标点击哪里就可以从哪里开始拖拽
            _this.style.top = e.clientY - diffY + ‘px‘;
        }
        document.onmouseup = function(){
            this.onmousemove = null;
            this.onmouseup = null;
        }
    }

  

                                 未完待续......^^

时间: 2024-08-24 12:37:20

拖拽效果实现原理的相关文章

js拖拽效果的原理及实现

js中元素的拖拽效果需要用到的主要的知识点为:事件侦听和鼠标事件.即被拖拽的元素添加事件侦听,侦听的事件主要为mousedown,mousemove和mouseup,一些情况下还需要用到mouseleave.本篇所针对的原理是存在多个相同元素情况下的拖拽.下面结合案例进行分析.1.首先在body中创建7个div元素,并设置css样式. <style> div{ width:50px; height: 50px; background-color: red; position: absolute

js拖拽效果的原理和实现

让我们了解一下最简单的拖拽效果: 1.首先我们先设置一个div,然后简单设置一下样式: div{ width:50px; height: 50px; background-color: red; position: absolute; } 2.然后我们编写js部分,我们要清楚,元素的拖拽分三个部分:鼠标左键按下.拖动鼠标元素跟着移动.以及鼠标左键抬起停止拖拽元素停止移动 var div = document.querySelector("div");                 

拖拽效果的实现原理分析2

拖拽效果的实现原理分析2 上文对html5支持的浏览器的拖拽效果进行了分析,本文不采用任何库,来分析下拖拽的过程 先想想我们平时拖拽是怎么操作的,大致可以分为几下几个步骤: 鼠标按下,鼠标移动,拖拽,被拖动的物件跟着走 鼠标松开,物件停止,无拖动了 计算距离,拖拽的距离(鼠标移动) 对应在事件上就是 onmousedown,onmousemove ,开始拖拽 onmouseup ,停止拖拽 计算相对的拖拽距离 下面我们按照这种思路,写一个拖拽效果,假设我们拖动标题,这块的内容就跟着走. 首先我们

js拖拽效果实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta

ListView可拖拽item的原理

通过继承ListView实现可拖拽的ListView,先说说实现拖拽的原理吧,实现拖拽需要考虑三个问题:第一怎么确定你在拖拽listview里面的item的时候就是你手指当前选中的item:第二实现拖拽的效果,就是有一个浮动的层跟随你的手指在移动:第三你放开手指时怎么把你拖拽的这个item放到当前listView的位置(也就是说改变item的位置).明白了这三个问题就比较好实现了. 里面会涉及到一些比较重要的方法调用,首先是pointToPosition(int x, int y)这方方法And

vue模块拖拽效果

正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑. 现在闲来无事,把这个东西实现了一下. 原理很简单,写的很方便. 数据驱动,建立一个数组,数组初始长度为1 拖动触发时,添加一个对象到数组中,拖动的是下标为0的对象,新建的还在原来位置放着,等待下次拖动. 话不多说,上代码 <template> <div class="view"> <div class="x" @mousedown="move($e

简单的鼠标拖拽效果(原生js实现)

之前在聊天群里看到有人说面试的时候被问到了怎样实现一个拖拽效果,当时看到后在心里默默思考了下,结果发现好像我也写不出来啊.本着遇到一个解决一个的思想,就亲自敲了一个,看到张鑫旭大神写的代码,真的很厉害,多多学习了,(感觉随便搜一个关于前端方面的问题都能看到他的网站,真是太佩服了,写了那么多文章,十分感谢.)好了,接下来就进入正题了.想实现一个效果首先得明白其中的逻辑,知道了实现逻辑后,就可以码代码了.首先我实现的效果是: 鼠标按下后,才可以执行后续效果 鼠标已经按下,然后鼠标移动,需要拖拽的元素

Createjs学习心得之使用EaselJs实现拖拽效果

寒假时跟着老师在做一个createjs+angularjs的html5应用app,因为在这之前完全没了解过createjs这个框架,所以在查找资料时发现,国外官网(http://www.createjs.com)API文档虽是详细,但对于一些英语不太好的童鞋(其实我也是一枚英语渣渣)就比较难理解了.而国内中文社区做的并不好,用户不多,资料翻译准确度不够.所以在这里,我就把我学习Createjs的一些心得体会向大家分享下: 一.什么是CreateJS? createjs是一个轻量级的javascr

WEB前端开发学习----11. JQuery 实现简单的拖拽效果

拖拽效果在网页中很常见.实现起来也不难.记录一下今天实现的简单效果. 拖拽演示 快速拖动时,会出现问题,以后修改. 说白了,就是3个点击事件. 1. 按下鼠标左键, 触发点击事件,此时记录下可以得到鼠标相对于拖动控件的位置(当前鼠标位置-控件位置): 2. 拖动鼠标,触发移动事件,可以计算出鼠标移动的距离(当前鼠标位置-之前算出的相对位置),也就是拖拽控件所移动的距离: 3. 鼠标抬起,结束拖动. 在JQ中,event.pageX    event.pageY可以获取鼠标的位置,相对于文档左上角