jQuery拖拽功能

Posted 2020-11-22 0826sw

html:

<div></div>

CSS:

*{
    padding: 0;
    margin: 0;
}

div{
    width: 100px;
    height: 100px;
    background: #f00;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
}

JS:

$(‘div‘).mousedown(function(e) {
    // e.pageX
    var positionDiv = $(this).offset();
    var distenceX = e.pageX - positionDiv.left;
    var distenceY = e.pageY - positionDiv.top;
    //alert(distenceX)
    // alert(positionDiv.left);

    $(document).mousemove(function(e) {
        var x = e.pageX - distenceX;
        var y = e.pageY - distenceY;

        if (x < 0) {
            x = 0;
        } else if (x > $(document).width() - $(‘div‘).outerWidth(true)) {
            x = $(document).width() - $(‘div‘).outerWidth(true);
        }

        if (y < 0) {
            y = 0;
        } else if (y > $(document).height() - $(‘div‘).outerHeight(true)) {
            y = $(document).height() - $(‘div‘).outerHeight(true);
        }

        $(‘div‘).css({
            ‘left‘: x + ‘px‘,
            ‘top‘: y + ‘px‘
        });
    });

    $(document).mouseup(function() {
        $(document).off(‘mousemove‘);
    });
});

效果网址:

http://www.jq22.com/webqd1345