码迷,mamicode.com
首页 > Web开发 > 详细

纯js实现DIV拖拽

时间:2016-05-24 01:41:31      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:

写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章《JavaScript实现最简单的拖拽效果》,便直接拿来使用(膜拜大神)。但发现这段代码使用前必须设置top和left样式属性,否则拖动时div会有跳动,而且不支持多个div的拖动。于是对代码大概修改了一番,贴在这里,以备后用,希望大神勿怪。

var startDrag = function(bar, target, callback) {
    (function(bar, target, callback) {
        var params = {
            left: 0,
            top: 0,
            currentX: 0,
            currentY: 0,
            flag: false
        };
        bar.onmousedown = function(e){
            params.flag = true;
            params.left = target.offsetLeft;
            params.top = target.offsetTop;
            if(!e){
                e = window.event;
                bar.onselectstart = function(){
                    return false;
                }
            }
            params.currentX = e.clientX;
            params.currentY = e.clientY;
        };
        bar.onmouseup = function(){
            params.flag = false;
        };
        bar.onmousemove = function(e){
            var evt = e ? e: window.event;
            if(params.flag){
                var nowX = evt.clientX, nowY = evt.clientY;
                var disX = nowX - params.currentX, disY = nowY - params.currentY;
                target.style.left = parseInt(params.left) + disX + "px";
                target.style.top = parseInt(params.top) + disY + "px";
            }

            if (typeof callback == "function") {
                callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
            }
        }
    })(bar, target, callback);
};

上边的方法主要接受两个参数:第一个是点击的对象(即点击那里可以实现拖拽,例如弹出层的标题栏),第二个是拖拽的对象(例如一个弹出层)。也就是startDrag(触发拖拽对象,被拖拽对象)。详细使用方法猛戳上边链接查看。

纯js实现DIV拖拽

标签:

原文地址:http://www.cnblogs.com/Ghunter/p/5522043.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!