jQuery元素拖拽

Html

Css

* {
	padding:0;
	margin:0;
}
html,body {
	height:100%;
}
.bbox {
	background-color:#3B51A2
}
.box,.box2,.box3 {
	position:absolute;
	width:200px;
	height:200px;
	border:1px solid #eee;
	background-color:#323C6C;
}
.box2 {
	background-color:#4AAF59;
}
.box3 {
	background-color:#F19A4E;
}

$.fn.extend({

lzhDrag: function (obj) {
        let max_left = $(this).offsetParent().outerWidth() - $(this).outerWidth(),
            max_top = $(this).offsetParent().outerHeight() - $(this).outerHeight();
        $(this).on('mousedown', event => {
            let ele_x = event.offsetX,
                ele_y = event.offsetY;
            obj.startDown && obj.startDown();
            $(document).on('mousemove', e => {
                obj.startMove && obj.startMove();
                e.preventDefault();
                let left = e.clientX - ele_x,
                    top = e.clientY - ele_y;
                left = left < 0 ? 0 : left;
                top = top < 0 ? 0 : top;
                left = left > max_left ? max_left : left;
                top = top > max_top ? max_top : top;
                $(this).css({
                    left, top
                })
            })
        })
        $(document).on('mouseup', () => {

$(document).off('mousemove');
            obj.overMove && obj.overMove();
        })
        return this;
    }
})
	
/**
            * 
            lzhDrag()有一个参数，参数为对象
                startDown：鼠标按下的时候会触发的函数
                startMove：鼠标开始移动触发的函数
                overMove：移动对象停止移动时触发函数（拖拽事件鼠标抬起触发）
            */
        $(".box").lzhDrag({
            startDown: function () {
                console.log("down");
            },
            startMove: function () {
                console.log("startmove");
            },
            overMove: function () {
                console.log("move");
            }
        }).html("box1");
		
		$(".box2").lzhDrag({
            startDown: function () {
                console.log("down");
            },
            startMove: function () {
                console.log("startmove");
            },
            overMove: function () {
                console.log("move");
            }
        }).html("box2");
		
		$(".box3").lzhDrag({
            startDown: function () {
                console.log("down");
            },
            startMove: function () {
                console.log("startmove");
            },
            overMove: function () {
                console.log("move");
            }
        }).html("box3");

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery元素拖拽



代码描述：多变性拖拽，分别可以设置拖拽执行过程执行的方法

更新时间：2019-12-22 23:16:32

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

How Are You

相关代码

jQuery元素拖拽

最新