鼠标事件及达成拖拽效果

2019-12-02 23:34栏目:竞技宝竞猜
TAG:

本文介绍原生javascript实现元素拖动。

鼠标事件

与鼠标相关的事件如图所示,除了'mouseenter'和'mouseleave'外的所有鼠标事件都能冒泡。
在这里补充一个:
contextmenu [可以取消的事件,当上下文菜单即将出现时触发。]

图片 1

鼠标事件


在开始之前有必要赘述一下事件对象的相关知识

一、前言:

思路:

事件对象

当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息。包括事件的目标元素、事件的类型以及其它与特定事件相关的事件。
事件对象,我们一般称为event对象。事件对象作为参数传递给事件处理程序函数,IE8以及之前的版本event是作为window对象的属性存在的。故有了以下常见的写法:
function(e){ var e = e || e.window; /*you code*/ }
在标准的DOM事件和IE事件中,even对象t可用的属性和方法也不一样。

图片 2

W3C

图片 3

IE

 /*得到事件目标DOM对象*/
function getTarget(e){
        var e =e || window.e;
        return e.target || e.srcElement;
}
/*阻止冒泡*/
function stopPro(e){
        var e = e || window.e;
        window.event ? e.cancelBubble = true : e.stopPropagation();
}

事件对象提供了两组属性来区别浏览器坐标的属性,一组是页面可视区坐标,另一组是屏幕坐标。

图片 4

坐标属性

图片 5

Client X_Y.png

相信通过上面的介绍,大家已经对以上内容了然于胸了。接下来我们一起来看看拖拽效果的实现吧。

最近要实现一个元素拖放效果,鼠标拖动元素并且定位元素,首先想到的是HTML5中的拖放,在HTML5中,有一个draggable属性,且有dragstart, dragover, drop等事件,主要是通过event.dataTransfer对象方法,在dragstart事件中设置数据event.dataTransfer.setData(); 在drop事件中获取数据event.dataTransfer.getData();但是它并不能实现元素的实时拖放效果,因此还是需要用鼠标事件来模拟元素的拖放。

1.首先改变被拖动元素的布局属性,关键是“position:absolue”;

拖拽效果

 

2.捕捉鼠标事件"mousedown","mousemove","mouseup";

想想是怎么个事,想明白了很好实现的

首先我们来思考一下拖拽功能用到的事件
拖拽无非是鼠标按下点击元素(DOM节点)
鼠标移动,元素移动
鼠标抬起,元素停止不动
所以这里我们需要绑定三个事件
mousedown、mousemove、mouseup
在这里
mousemove和mouseup事件触发应该是由一个鼠标按下的前提
我们可以利用一个布尔变量储存状态表示当前是否鼠标按下
或者干脆在mousedown事件处理函数中去绑定mousemove、mouseup

实现的代码主要是参照JS权威指南17.5鼠标事件的内容,直接在mousedown事件处理函数中去绑定mousemove和mouseup。代码这里就不贴了,代码地址如下,如若需要,可自行查看。

https://github.com/YLiJingan/Basic


二、实例示图 

3.当触发"mousedown"时,记录下当前鼠标在元素中的相对位置,_x,_y;

说明:

drag()接受两个参数,第一个是要拖动的元素,它必须是使用css position 属性绝对定位的元素。第二个元素是触发mousedown事件的事件对象。

drag()函数把mousedown事件发生的位置转换为文档坐标,为了计算鼠标指正到正在移动的元素左上角之间的距离。mouseover事件处理函数用于响应文档元素的移动,mouseup事件处理函数用于注销自己(mousedown)和mousemove事件处理函数。

 

4.紧接着处理"mousemove"事件,通过改变元素的top和left属性来移动元素;

参考资料:

《Javascript权威指南》

http://www.zhangxinxu.com/wordpress/2010/03/javascript%E5%AE%9E%E7%8E%B0%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C/

http://blog.csdn.net/q1056843325/article/details/53026634

http://blog.csdn.net/witnessai1/article/details/52551362

图片 6

5.当触发"mouseup"时间时,终止拖动。

 

同时,应考虑代码的封装性和浏览器的兼容性,代码如下:

三、实现原理:

   draggable div  body{ margin: 0; padding: 0; background-color: #fff; } #drag_div{ width: 150px; height: 150px; padding: 10px; margin: 10px; background-color: #66dd33; cursor: move; }        function Drag () { this.initialize.apply; } Drag.prototype = { // 初始化 initialize : function  { this.element = this.$; // 被拖动的对象 this._x = this._y = 0; // 鼠标在元素中的位置 this._moveDrag = this.bind; this._stopDrag = this.bind; // 设置参数 this.setOptions; // 设置鼠标去“拖”的“柄”对象 this.handle = this.$; // 设置回调函数 this.onStart = this.options.onStart; this.onMove = this.options.onMove; this.onStop = this.options.onStop; this.handle.style.cursor = "move"; this.changeLayout(); // 注册开始拖动事件 this.addHandler(this.handle, "mousedown", this.bind); }, // 改变被拖动对象的布局属性 changeLayout: function () { this.element.style.top = this.element.offsetTop + "px"; this.element.style.left = this.element.offsetLeft + "px"; this.element.style.position = "absolute"; this.element.style.margin = "0"; }, startDrag : function  { var event = event || window.event; this._x = event.clientX - this.element.offsetLeft; this._y = event.clientY - this.element.offsetTop; this.addHandler(document, "mousemove", this._moveDrag); this.addHandler(document, "mouseup", this._stopDrag); this.preventDefault; this.handle.setCapture && this.handle.setCapture; }, moveDrag : function  { var event = this.getEvent; var iTop = event.clientY - this._y; var iLeft = event.clientX - this._x; this.element.style.top = iTop + "px"; this.element.style.left = iLeft + "px"; this.onMove(); }, stopDrag : function () { this.removeHandler(document, "mousemove", this._moveDrag); this.removeHandler(document, "mouseup", this._stopDrag); this.handle.releaseCapture && this.handle.releaseCapture }, setOptions : function  { this.options = { handle: this.element, //事件对象 onStart : function () {}, // 开始时回调函数 onMove : function(){}, // 拖拽时回调函数 onStop : function(){} // 停止时回调函数 }; for{ this.options[p] = options[p]; } }, $ : function  { return typeof id === "string" ? document.getElementById:id; }, addHandler : function (element, eventType, handler) { if(element.addEventListener){ return element.addEventListener(eventType, handler, false); }else{ return element.attachEvent("on"+eventType, handler); } }, removeHandler : function (element, eventType, handler) { if(element.removeEventListener){ return element.removeEventListener(eventType, handler, false); }else{ return element.detachEvent("on" + eventType, handler); } }, getEvent: function  { return event || window.event; }, preventDefault: function  { if{ event.preventDefault(); }else{ event.returnValue = false; } }, bind : function  { return function () { return handler.apply; } } }; window.onload = function () { var drag_div = document.getElementById; var drag = new Drag(drag_div, {handle: drag_div}); }  

1、思路:鼠标依次触发mousedown, mousemove, mouseup事件,在mousemove事件中实时计算元素新位置并且定位元素,

在mouseup事件中注销mousemove,mouseup事件。

 

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:鼠标事件及达成拖拽效果