jQuery鼠标拖拽复制

Html

Css

body {
	line-height:150%
}
.show {
	display:block
}
.hide {
	display:none
}
.clone {
	position:absolute;
	border:1px solid #666;
	background-color:#CCCCCC;
}
.over {
	border:1px solid #666;
}
#left {
	float:left;
	width:200px;
	border:1px solid #666;
}
#left li.selected {
	background-color:#CCCCCC
}
#right {
	margin-left:220px;
	border:1px solid #666;
}

$(function() {
    $("#left li").click(function(e) {
        var index = $(this).index();
        $("#left li").removeClass("selected");
        $(this).addClass("selected");
        $("#right ul").removeClass('show');
        $("#right ul").addClass('hide');
        $("#right ul").eq(index).removeClass('hide');
        $("#right ul").eq(index).addClass('show');
    });

$("#left ul li").mousemove(function(e) {
        if ($(this).attr('class') != 'selected' && $(".clone").length > 0) {
            $(this).addClass('over');
        }
    });
    $("#left ul li").mouseout(function(e) {
        if ($(this).attr('class') != 'selected') {
            $(this).removeClass('over');
        }
    });
    $("#left ul li").mouseup(function(e) {
        if ($(this).attr('class') != 'selected' && $(".clone").length > 0) {
            var index = $(this).index();
            //$("#right ul").eq(index).prepend($(".clone"));
            $(".clone").appendTo($("#right ul").eq(index));
            $(".clone").attr('class', '');
        }
    });
    $("#right ul li").mousedown(function(e) { //鼠标按下，鼠标变移动标志，克隆元素，并确定新克隆元素位置
        $(this).clone().addClass("clone").appendTo($("body"));
        $("body").css('cursor', 'move');
        $(".clone").css('left', e.clientX + 1);
        $(".clone").css('top', e.clientY + 1);

});
    $(document).mousemove(function(e) {
        if ($(".clone").length > 0) {
            $(".clone").css('left', e.clientX + 1);
            $(".clone").css('top', e.clientY + 1);
        }
    });
    $(document).mouseup(function(e) {
        $(".clone").remove();
        $("body").css('cursor', 'auto');
    });
});

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

立即下载

jQuery鼠标拖拽复制



代码描述：简单的jQuery鼠标拖拽复制，把右边列表框的内容拖拽到左边

更新时间：2020-03-15 23:53:24

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

邵小伟2008

相关代码

jQuery鼠标拖拽复制

最新