多层拖拽(原创)

Html

Css

.outer {
	width:800px;
	height:600px;
	border:1px solid #ccc;
	overflow:hidden;
	margin:auto;
}
.middle {
	width:200px;
	height:200px;
	margin:auto;
	overflow:hidden;
	border:1px solid blue;
}
.inside {
	width:50px;
	height:50px;
	margin:auto;
	border:1px solid red;
}

$(function() {
    var move = {},
        curr;
    move.x = move.y = move.mousekey = 0;
    $(document).on("mousedown", function(e) {
        curr = e.originalEvent.srcElement; //获取当前选中的标签对象  
        e.stopPropagation(); //阻止事件冒泡（事件穿透）  
        move.mousekey = true;
        $(curr).css("cursor", "move");
        $(curr).css('position', 'relative');
        $(curr).parent().css('position', 'relative');
        var left = $(curr).css("left");
        var top = $(curr).css("top");
        move.x = e.pageX - parseInt(left == 'auto' ? 0 : left);
        move.y = e.pageY - parseInt(top == 'auto' ? 0 : top);
    }).on('mouseout', function() {
        move.mousekey = false;
        $(curr).css("cursor", "default");
    }).on('mousemove', function(e) {
        if (move.mousekey) {
            $(curr).css({
                top: e.pageY - move.y,
                left: e.pageX - move.x
            });
        }
    }).on('mouseup', function() {
        move.mousekey = false;
        $(curr).css("cursor", "default");
    });
});

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

立即下载

多层拖拽(原创)

代码描述：jQuery多层div拖拽

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

47 RONIN

相关代码

多层拖拽(原创)

最新