jquery实现拖动效果

PROMULGATOR

魔界小鸟

山东省济南市

← jQuery基于正则表达式的表单验证功能示例

→ jQuery代码实现实时获取时间

相关代码

jquery实现拖动效果

模态框的拖动效果

js范围内拖动、缩放

jQuery div拖动

jquery实现拖动div面板

Html

Css

Js


    
        自己动手试试
    
    
        点击鼠标拖拖看

.page {
	text-align:left;
}
.dragDiv {
	border:1px solid #ddd;
	padding:10px;
	width:300px;
	margin:0 auto;
	border-radius:4px;
	box-shadow:0 1px 2px #fefefe;
	position:fixed;
}

var _drag = {};
_drag.top = 0; //拖动过的位置距离上边
_drag.left = 0; //拖动过的位置距离左边
_drag.maxLeft; //距离左边最大的距离
_drag.maxTop; //距离上边最大的距离
_drag.dragging = false; //是否拖动标志
//拖动函数
function bindDrag(el) {
    var winWidth = $(window).width(),
    winHeight = $(window).height(),
    objWidth = $(el).outerWidth(),
    objHeight = $(el).outerHeight();
    _drag.maxLeft = winWidth - objWidth,
    _drag.maxTop = winHeight - objHeight;
    var els = el.style,
    x = 0,
    y = 0;
    var objTop = $(el).offset().top,
    objLeft = $(el).offset().left;
    $(el).mousedown(function(e) {
        _drag.dragging = true;
        _drag.isDragged = true;
        x = e.clientX - el.offsetLeft;
        y = e.clientY - el.offsetTop;
        el.setCapture && el.setCapture();
        $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
        return false;
    });
    function mouseMove(e) {
        e = e || window.event;
        if (_drag.dragging) {
            _drag.top = e.clientY - y;
            _drag.left = e.clientX - x;
            _drag.top = _drag.top > _drag.maxTop ? _drag.maxTop: _drag.top;
            _drag.left = _drag.left > _drag.maxLeft ? _drag.maxLeft: _drag.left;
            _drag.top = _drag.top < 0 ? 0 : _drag.top;
            _drag.left = _drag.left < 0 ? 0 : _drag.left;
            els.top = _drag.top + 'px';
            els.left = _drag.left + 'px';
            return false;
        }
    }
    function mouseUp(e) {
        _drag.dragging = false;
        el.releaseCapture && el.releaseCapture();
        e.cancelBubble = true;
        $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
    }
    $(window).resize(function() {
        var winWidth = $(window).width(),
        winHeight = $(window).height(),
        el = $(el),
        elWidth = el.outerWidth(),
        elHeight = el.outerHeight(),
        elLeft = parseFloat(el.css('left')),
        elTop = parseFloat(el.css('top'));
        _drag.maxLeft = winWidth - elWidth;
        _drag.maxTop = winHeight - elHeight;
        _drag.top = _drag.maxTop < elTop ? _drag.maxTop: elTop;
        _drag.left = _drag.maxLeft < elLeft ? _drag.maxLeft: elLeft;
        el.css({
            top: _drag.top,
            left: _drag.left
        })
    })
}
bindDrag(document.getElementById('drag'));

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

立即下载

jquery实现拖动效果



代码描述：jquery实现拖动效果的示例代码

1

最新

发表评论全部评论

暂时没有评论！

我不叫大zhi！0

2018/10/24 17:13:25

鼠标按下后拖出窗口范围
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery实现拖动效果-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号