自定义大小拖动视图

Html

Css


    
        拖动我

.box {
	position:absolute;
	width:200px;
	height:200px;
	background:#f0f3f9;
	font-size:12px;
	border:1px solid #DADADA;
}
.bar {
	width:200px;
	height:30px;
	background:#fefeff;
	cursor:move;
	position:relative;
	background:red;
	border-bottom:1px solid #DADADA;
}

var params = {
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
};
//获取相关CSS属性
var getCss = function(o, key) {
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
};

//拖拽的实现
var startDrag = function(bar, target, callback) {
    if (getCss(target, "left") !== "auto") {
        params.left = getCss(target, "left");
    }
    if (getCss(target, "top") !== "auto") {
        params.top = getCss(target, "top");
    }
    //o是移动对象
    bar.onmousedown = function(event) {
        params.flag = true;
        if (!event) {
            event = window.event;
            //防止IE文字选中
            bar.onselectstart = function() {
                return false;
            }
        }
        var e = event;
        params.currentX = e.clientX;
        params.currentY = e.clientY;
    };
    document.onmouseup = function() {
        params.flag = false;
        if (getCss(target, "left") !== "auto") {
            params.left = getCss(target, "left");
        }
        if (getCss(target, "top") !== "auto") {
            params.top = getCss(target, "top");
        }
    };
    document.onmousemove = function(event) {
        var e = event ? event : window.event;
        if (params.flag) {
            var nowX = e.clientX,
                nowY = e.clientY;
            var disX = nowX - params.currentX,
                disY = nowY - params.currentY;
            target.style.left = parseInt(params.left) + disX + "px";
            target.style.top = parseInt(params.top) + disY + "px";
        }

if (typeof callback == "function") {
            callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
        }
    }
};

function changestyle() {
    var oBox = document.getElementById("dragbox");
    var oBar = document.getElementById("dragbar");
    startDrag(oBar, oBox);
}

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

立即下载

自定义大小拖动视图



代码描述：可以控制视图部分区域的拖动

可以自定义大小，能被拖动的范围

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

crystal

相关代码

自定义大小拖动视图

最新