0
点赞
收藏
分享

微信扫一扫

JS拖拽的n种例子

黎轩的闲暇时光 2022-03-26 阅读 62
javascript开发语言前端es6html

一、第一种

<!DOCTYPE html>
<!--create by ydj on 2018-08-12-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖动的水平条</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.scroll{
				width: 400px;
				height: 8px;
				background-color: #ccc;
				margin: 100px;
				position: relative;
			}
			.bar{
				width: 10px;
				height: 22px;
				background-color: #369;
				position: absolute;
				top: -7px;
				left: 0;
				cursor: pointer;
			}
			.mask{
				width: 0;
				height: 100%;
				background-color: #336699;
				/*position: absolute;
				top: 0;
				left: 0;*/
			}
		</style>
	</head>
	<body>
		<div class="scroll" id="scrollBar">
			<div class="bar"></div>
			<div class="mask"></div>
		</div>
		<div class="demo" id="demo"></div>
	</body>
</html>
<script>
	// 获取元素
	var scrollBar = document.getElementById("scrollBar");
	var bar = scrollBar.children[0];
	var mask = scrollBar.children[1];
	var demo = document.getElementById("demo");
	// 拖动原理
	bar.onmousedown = function(event){
		var event = event || window.event;
		var leftVal = event.clientX - this.offsetLeft;
		// 拖动放到down的里面
		var that = this;
		document.onmousemove = function(event){
			var event = event || window.event;
			that.style.left = event.clientX - leftVal + "px";
			// 限制条件
			var val = parseInt(that.style.left);
			if(val < 0){
				that.style.left = 0;
			}else if(val > 390){
				that.style.left = "390px";
			}
			// 移动的距离为遮罩的宽度
			mask.style.width = that.style.left;
			// 显示百分比
			demo.innerHTML = "移动了:"+ parseInt(parseInt(that.style.left) / 390 * 100) + "%";
			// 清除拖动 --- 防止鼠标已经弹起时还在拖动
			window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();
		}
		// 鼠标抬起停止拖动
		document.onmouseup = function(){
			document.onmousemove = null;
		}
	}
</script>

摘自文章：js实现拖动的水平条_敲出真谛的博客-CSDN博客_js 拖动条 

二、第二种

 

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>resize</title>
        <style>
            *,
            *:before,
            *:after {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
        
            body {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                width: 100vw;
                height: 100vh;
                overflow: hidden;
            }
        
            header,
            footer {
                flex: none;
                width: 100%;
                height: 60px;
                background: lightgrey;
            }
        
            footer {
                position: relative;
                background: lightblue;
            }
        
            .main {
                flex: auto;
                display: flex;
                align-items: stretch;
            }
        
            .sidebar {
                flex: none;
                width: 200px;
                background: lightgoldenrodyellow;
            }
        
            .container {
                position: relative;
                flex: auto;
                background: #e0bfc4;
            }
        
            .resize {
                position: absolute;
                z-index: 100;
                touch-action: none;
            }
        
            .resize.horizontal {
                top: 0;
                bottom: 0;
                left: 0;
                width: 4px;
                cursor: e-resize;
            }
        
            .resize.vertical {
                left: 0;
                right: 0;
                top: 0;
                height: 4px;
                cursor: n-resize;
            }
        </style>
    </head>
    <body>
        <header>头部</header>
        <section class="main">
            <acticle class="sidebar">侧边栏</acticle>
            <acticle class="container">内容区域
                <div class="resize horizontal" onmousedown="mousedown('horizontal')"></div>
            </acticle>
        </section>
        <footer>底部
            <div class="resize vertical" onmousedown="mousedown('vertical')"></div>
        </footer>
    </body>
    <script>
        function mousedown(flag) {
            document.onmousemove = function () {
                // console.log("flag",event,flag)
                if (flag === "horizontal") {
                    if (event.x < 200 || event.x > 800) return
                    var sidebar = document.querySelector(".sidebar")
                    sidebar.style.width = event.x + "px"
                } else if (flag === "vertical") {
                    if (event.y < 500 || event.y > 877) return
                    var foot = document.querySelector("footer")
                    var top = Number(foot.getBoundingClientRect().top)
                    var height = Number(foot.getBoundingClientRect().height)
                    foot.style.height = height + top - event.y + "px"
                }
            }
        }
        document.onmouseup = function () {
            document.onmousemove = null
        }
    </script>
</html>

摘自文章：index.html · wg18/resize_layout - Gitee.com

三、第三种 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                font: 14px/1.5 Arial;
                color: #666;
            }

            #box {
                position: relative;
                width: 600px;
                height: 400px;
                border: 2px solid #000;
                margin: 10px auto;
                overflow: hidden;
                display: flex;
            }

            #left {
                height: 100%;
                flex: 1;
                overflow: hidden;
            }

            #right {
                width: 300px;
                overflow: hidden;
            }

            #line {
                width: 8px;
                background: lightblue;
                cursor: col-resize;
            }

            #line a {
                cursor: pointer;
                text-align: center;
            }
        </style>
        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
        <script>
            function $(id) {
                return document.getElementById(id)
            }
            window.onload = function () {
                var oBox = $("box"),
                    oLeft = $("left"),
                    oRight = $("right"),
                    oLine = $("line"),
                    oLine1 = $("line1");
                var flag = true;
                var wid = 0;

                oLine.onmousedown = function (e) {
                    var disX = (e || event).clientX;
                    var owidth = oBox.clientWidth - oLine.offsetLeft;
                    document.onmousemove = function (e) {
                        var iT = owidth - ((e || event).clientX - disX);
                        var e = e || window.event;
                        var maxT = oBox.clientWidth - oLine.offsetWidth;
                        oLine.style.margin = 0;
                        iT < 30 && (iT = 30);
                        iT > maxT && (iT = maxT);
                        wid = iT;
                        oRight.style.width = iT + "px";
                        return false
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        oLine.releaseCapture && oLine.releaseCapture()
                    };
                    oLine.setCapture && oLine.setCapture();
                    return false
                };

                oLine1.onclick = function () {
                    if (flag) {
                        oRight.style.width = 30 + "px";
                        flag = false;
                    } else {
                        if (wid && wid > 30) {
                            oRight.style.width = wid + "px";
                        } else {
                            oRight.style.width = 300 + "px";
                        }
                        flag = true;
                    }
                }

            };
        </script>
    </head>
    <body>
        <div id="box">
            <div id="left">
            </div>
            <div id="line">
                <a id="line1">
                    <span><i class="fa fa-caret-right"></i></span>
                </a>
            </div>
            <div id="right">
            </div>
        </div>
    </body>
</html>

 四、第四种

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <title>仿Windows垂直调整</title>
        <style type="text/css">
            ul,
            li {
                margin: 0;
                padding: 0;
            }

            body {
                font: 14px/1.5 Arial;
                color: #666;
            }

            #box {
                position: relative;
                width: 600px;
                height: 400px;
                border: 2px solid #000;
                margin: 10px auto;
                overflow: hidden;
            }

            #box ul {
                list-style-position: inside;
                margin: 10px;
            }

            #box div {
                position: absolute;
                width: 100%;
            }

            #top,
            #bottom {
                color: #FFF;
                height: 100%;
                overflow: hidden;
            }

            #top {
                background: green;
            }

            #bottom {
                background: skyblue;
                top: 50%
            }

            #line {
                top: 50%;
                height: 4px;
                overflow: hidden;
                margin-top: -2px;
                background: red;
                cursor: n-resize;
            }
        </style>
        <script>
            function $(id) {
                return document.getElementById(id)
            }
            window.onload = function () {
                var oBox = $("box"), oBottom = $("bottom"), oLine = $("line");
                oLine.onmousedown = function (e) {
                    var disY = (e || event).clientY;
                    oLine.top = oLine.offsetTop;
                    document.onmousemove = function (e) {
                        var iT = oLine.top + ((e || event).clientY - disY);
                        var maxT = oBox.clientHeight - oLine.offsetHeight;
                        oLine.style.margin = 0;
                        iT < 0 && (iT = 0);
                        iT > maxT && (iT = maxT);
                        oLine.style.top = oBottom.style.top = iT + "px";
                        return false
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        oLine.releaseCapture && oLine.releaseCapture()
                    };
                    oLine.setCapture && oLine.setCapture();
                    return false
                };
            };
        </script>
    </head>
    <body>
        <center>上下拖动红条改变显示区域高度</center>
        <div id="box">
            <div id="top">
                <ul>
                    <li>jQuery初学实例代码集</li>
                    <li>100多个ExtJS应用初学实例集</li>
                    <li>基于jQuery的省、市、县三级级联菜单</li>
                    <li>一个类似QQ网的JS相册展示特效</li>
                    <li>eWebEditor v4.60 最新通用精简版</li>
                    <li>FCKeditor 2.6.4.1 网页编辑器</li>
                    <li>jQuery平滑图片滚动</li>
                    <li>Xml+JS省市县三级联动菜单</li>
                    <li>jQuery 鼠标滑过链接文字弹出层提示的效果</li>
                    <li>JS可控制的图片左右滚动特效（走马灯） </li>
                </ul>
            </div>
            <div id="bottom">
                <ul>
                    <li>网页上部大Banner广告特效及图片横向滚动代码</li>
                    <li>FlexSlider网页广告、图片焦点图切换插件</li>
                    <li>兼容IE，火狐的JavaScript图片切换</li>
                    <li>jQuery仿ios无线局域网WIFI提示效果（折叠面板）</li>
                    <li>TopUp js图片展示及弹出层特效代码</li>
                    <li>jQuery仿Apple苹果手机放大镜阅读效果</li>
                    <li>Colortip 文字title多样式提示插件</li>
                    <li>网页换肤，Ajax网页风格切换代码集</li>
                    <li>超强大、漂亮的蓝色网页弹出层效果</li>
                    <li>jQuery 图像预览功能的代码实现 </li>
                </ul>
            </div>
            <div id="line"></div>
        </div>
    </body>
</html>

五、第五种

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
        $(function () {
            var inner;
            var top, bottom;
            $('.menubar').draggable({
                axis: 'y',
                containment: '.left',
                start: function () {
                    inner = parseInt($('.container').height())
                    $('.menubar').css({ 'top': 'auto', 'bottom': 'opx' });
                },
                drag: function (e, ui) {
                    top = (ui.position.top / inner) * 100;
                    bottom = 100 - top;
                    $('.top').height(top + '%');
                    $('.bottom').height(bottom + '%');
                    //$('.middle').css('bottom',bottom+'%');
                },
                stop: function () {
                    $('.menubar').css({ 'top': 'auto', 'bottom': 'opx' });
                }
            });
            $('.container').resizable({});
        });
    </script>
    <style>
        body,
        div {
            margin: 0;
            padding: 0
        }

        .container {
            margin: 0 auto;
            width: 1000px;
            position: absolute;
            height: 510px;
            background-color: #CCC;
            top: 100px;
        }

        .left {
            width: 700px;
            height: 100%;
            float: left;
            background-color: #0CF;
            overflow: hidden;
            position: relative
        }

        .left .top {
            height: 70%;
            width: 100%;
            border: 1px solid #F00;
            overflow-x: hidden;
            overflow-y: auto;
            padding-bottom: 40px;
            position: relative
        }

        .left .content {
            height: 100%
        }

        .left .menubar {
            height: 40px;
            position: absolute;
            background-color: #0F9;
            bottom: 0;
            width: 100%
        }

        .left .bottom {
            height: 30%;
            width: 100%;
            border: 1px solid #00F;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .right {
            width: 280px;
            float: left;
            height: 100%;
            border: 1px solid #009
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">
            <div class="top">
                <div class="content">内容</div>
                <div class="menubar">工具条，可拖动</div>
            </div>
            <div class="bottom">内容输入</div>

        </div>
        <div class="right">右侧</div>
    </div>
</body>

</html>
举报

相关推荐

Swing, JTree拖拽的例子

SwingJavaF#JSPUP代码人生

JS 实现拖拽之 - 列表拖拽

基础前端工作生活

JS-拖拽

html前端

js 拖拽实现

javascript前端html

Js 之拖拽动画

f5htmlcss系统/运维

js遍历表格的例子

javascripttablehtmlbuttonborderHarmonyOS后端开发

JS实现拖拽和拉伸的实例

javascript前端htmlcss3

拖拽元素JS实现方法

html5与CSS前端开发那些事儿

原生js实现拖拽特效

css3动画html5

jQuery与js例子

htmljqueryideLinux系统/运维
0 条评论