用JQ实现拖拽组件

313 阅读1分钟

image.png

$('div').mousedown(function (e) {
        let offsetLeft = $('div').offset().left;
        let offsetTop = $('div').offset().top;
        let neibuX = e.pageX - offsetLeft;
        let neibuY = e.pageY - offsetTop;
        $(document).mousemove(function (e) {
            let left = e.pageX - neibuX;
            let top = e.pageY - neibuY;
            /*  console.log(left); */
            if (left < 0) left = 0;
            if (top < 0) top = 0;

            let maxW = $(document).width() - $('div').width();
            let maxH = $(document).height() - $('div').height();
            if (left > maxW) left = maxW;
            if (top > maxH) top = maxH;
            $('div').css('left', left + 'px')
            $('div').css('top', top + 'px')
        });

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