高级拖拽案例

Html

Css

.draft {
	width:600px;
	height:600px;
	background-color:#109d71;
	margin:50px auto;
	position:relative;
}
.draft span {
	width:200px;
	height:200px;
	border:1px solid #000;
	position:absolute;
	left:0;
	top:0;
	cursor:move;
	background:#c3003c;
}

$(function() {
    var $span = $('span');
    var span_width = $span.outerWidth();
    var span_height = $span.outerHeight();
    var x = 0;
    var y = 0;
    var $div = $('div');
    var span_max_left = $div.width() - span_width;
    var span_max_top = $div.height() - span_height;
    var div_x = $div.offset().left;
    var div_y = $div.offset().top;

//拖拽，需要鼠标先点下，然后再拖着走
    //拖拽是两个事件:先鼠标按下，然后再mousemove
    $span.mousedown(function(event) {
        $(window).mousemove(function(event) {
            // 事件发生地的坐标值如下：
            // console.log(event.pageX, event.pageY);

x = event.pageX - div_x - span_width / 2;
            y = event.pageY - div_y - span_height / 2;
            if (x < 0) {
                x = 0;
            }
            if (y < 0) {
                y = 0;
            }
            if (x > span_max_left) {
                x = span_max_left;
            }
            if (y > span_max_top) {
                y = span_max_top;
            }

$span.css({
                left: x,
                top: y
            });
        });
    });

// 当鼠标抬起的时候，解绑鼠标移动事件
    $(window).mouseup(function(event) {
        $(window).unbind('mousemove'); //解绑
    });
});

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

立即下载

高级拖拽案例



代码描述：原声js实现拖拽

使用原生js实现的有边界限制的拖拽，用户可以在有效区域内随意拖动哦（本demo没有使用面向对象实现，后续会继续更新）！

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

晴．雪无痕

相关代码

高级拖拽案例

最新