javascript——拖拽函数封装

CSS部分:

#div1{ width: 100px; height: 100px; background: #ccc; position: absolute;}
#img1{ position: absolute;}

HTML部分:

<div id="div1"></div>
<img id="img1" src="img/1.jpg" />

JS部分:

window.onload = function(){
        //获取相关元素
        var oDiv = document.getElementById(‘div1‘);
        var oImg = document.getElementById(‘img1‘);

        //函数调用
        drag(oDiv);
        drag(oImg);

        //函数封装
        function drag(obj){
            //obj鼠标按下
            obj.onmousedown = function(ev){

                var ev = ev || event;

                var disX = ev.clientX - this.offsetLeft;
                var disY = ev.clientY - this.offsetTop;

                if(obj.setCapture){
                    obj.setCapture();
                }

                //obj鼠标移动
                document.onmousemove = function(ev){

                    var ev = ev || event;

                    obj.style.left = ev.clientX - disX + ‘px‘;
                    obj.style.top = ev.clientY - disY + ‘px‘;
                };

                //obj鼠标释放
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                    if(obj.releaseCapture){
                        obj.releaseCapture();
                    }
                }
                return false;
            };
        };
    };
时间: 2024-10-17 00:06:42

javascript——拖拽函数封装的相关文章

拖拽函数封装,元素碰撞

function drag(obj){ obj.onmousedown = function(ev){ var ev = ev || event; //鼠标点击位置到图片两侧距离 var ol = ev.clientX - this.offsetLeft; var ot = ev.clientY - this.offsetTop; //非标准ie下利用全局捕获占用接下来的事件,相当于阻止浏览器默认行为 if(obj.setCapture){ obj.setCapture(); } documen

Javascript:常用函数封装

//cookie function setCookie(name, value, iDay) { if(iDay!==false) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate+';path=/'; } else { document.cookie=name+'='+value; } } function getCookie

javascript 拖拽

拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化:元素的移动就是style.position的top和left的改变.当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

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

今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <style type="text/css"> #div1 { width: 100px; height: 100px; background: red; position: absolute; } #div2 { width: 400px; height: 300px; backgrou

Javascript 拖拽的一些高级的应用——逐行分析代码,让你轻松了解拖拽的原理

我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来也不方便.顺便提一下,我们之前加了一个return false;帮我们解决了很多问题,如果去掉这个的话,chrome也会出现一样的问题.那么也就是说这个return false;可以解决chrome ff IE9+ 这些浏览器的问题. 实际上在我们开发中,页面上会有许多的元素组成,不可能就一个div

Javascript 拖拽雏形中的一些问题——逐行分析代码,让你轻松了拖拽的原理

今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { v

JavaScript拖拽

html拖拽的思路如下:鼠标按下 > 鼠标移动 > 鼠标弹起,只要把这三个鼠标事件添加到对应的dom元素上,作相应的处理就行了. 1.mousedown事件须加在可拖动dom上: 2.mousemove事件加在document上: 3.mouseup事件还是加在可拖动dom上: 注意:拖拽的时候要禁止选中页面文字 body{ -moz-user-select:none; -webkit-user-select:none; user-select:none; -ms-user-select: n

JavaScript拖拽原理的实现

实现拖拽的基本思路 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化:元素的移动就是style.position的top和left的改变.当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的. 根据以上的基本原理,我写出了下面的基本思路.感觉代码还是比较短的, view plaincopy to clipboardprint 拖拽状态 = 0鼠标在元素上按下的时候{ 拖拽状态 = 1 记录下鼠标的

Javascript 拖拽雏形——逐行分析代码,让你轻松了拖拽的原理

拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标.拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位置-物体位置的差值就是那个距离 是吧.那这个斜线就是横线和竖线组成的. 我们距离看下程序怎么做. /*实际上他改的就是某个div 的left top ,那他就动起来了. 那样式中肯定要有绝对定位是吧.*/ <style type="text/css"> #div1 { width