精华内容
下载资源
问答
  • 本例为大家演示个比较简单的div拖动,另外可根据自己的需求,添加相应的代码,实现自己的想要的效果,具体如下,喜欢的请支持下
  • 本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖div width resizetype="text/javascript">function bindResize(el){//初始化参数var els = document.getElementById('menu')....

    本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖

    div width resize

    function bindResize(el)

    {

    //初始化参数

    var els = document.getElementById('menu').style;

    //鼠标的 X 和 Y 轴坐标

    x = 0;

    //邪恶的食指

    $(el).mousedown(function (e)

    {

    //按下元素后,计算当前鼠标与对象计算后的坐标

    x = e.clientX - el.offsetWidth - $("#menu").width();

    //在支持 setCapture 做些东东

    el.setCapture ? (

    //捕捉焦点

    el.setCapture(),

    //设置事件

    el.onmousemove = function (ev)

    {

    mouseMove(ev || event);

    },

    el.onmouseup = mouseUp

    ) : (

    //绑定事件

    $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp)

    );

    //防止默认事件发生

    e.preventDefault();

    });

    //移动事件

    function mouseMove(e)

    {

    //宇宙超级无敌运算中...

    els.width = e.clientX - x + 'px';

    }

    //停止事件

    function mouseUp()

    {

    //在支持 releaseCapture 做些东东

    el.releaseCapture ? (

    //释放焦点

    el.releaseCapture(),

    //移除事件

    el.onmousemove = el.onmouseup = null

    ) : (

    //卸载事件

    $(document).unbind("mousemove",mouseMove).unbind("mouseup",mouseUp)

    );

    }

    }

    var divResize=function(){

    var totalHeight=$("html").height();

    console.log(totalHeight);

    var topHeight=$("#top").height()

    $("#menu").height(totalHeight-topHeight);

    $("#rightbar").height(totalHeight-topHeight);

    }

    $(function() {

    divResize();

    $(window).resize(divResize);

    bindResize(document.getElementById('rightbar'));

    });

    .content {

    width: 200px;

    background: #f1f1f1;

    text-align: center;

    border-color: #CCCCCC;

    border-style: solid;

    border-width: 0 1px;

    }

    style="width: 2px; background: #cccccc; cursor: e-resize;">

    --%>

    待拖拽的div

    style="width: 2px; background: #cccccc; cursor: e-resize; float: left;">

    总结

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

    小编个人微信号 jb51ccc

    喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

    展开全文
  • 本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖div width resizetype="text/javascript">function bindResize(el){//初始化参数var els = document.getElementById('menu')....

    本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖

    div width resize

    function bindResize(el)

    {

    //初始化参数

    var els = document.getElementById('menu').style;

    //鼠标的 X 和 Y 轴坐标

    x = 0;

    //邪恶的食指

    $(el).mousedown(function (e)

    {

    //按下元素后,计算当前鼠标与对象计算后的坐标

    x = e.clientX - el.offsetWidth - $("#menu").width();

    //在支持 setCapture 做些东东

    el.setCapture ? (

    //捕捉焦点

    el.setCapture(),

    //设置事件

    el.onmousemove = function (ev)

    {

    mouseMove(ev || event);

    },

    el.onmouseup = mouseUp

    ) : (

    //绑定事件

    $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)

    );

    //防止默认事件发生

    e.preventDefault();

    });

    //移动事件

    function mouseMove(e)

    {

    //宇宙超级无敌运算中...

    els.width = e.clientX - x + 'px';

    }

    //停止事件

    function mouseUp()

    {

    //在支持 releaseCapture 做些东东

    el.releaseCapture ? (

    //释放焦点

    el.releaseCapture(),

    //移除事件

    el.onmousemove = el.onmouseup = null

    ) : (

    //卸载事件

    $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)

    );

    }

    }

    var divResize=function(){

    var totalHeight=$("html").height();

    console.log(totalHeight);

    var topHeight=$("#top").height()

    $("#menu").height(totalHeight-topHeight);

    $("#rightbar").height(totalHeight-topHeight);

    }

    $(function() {

    divResize();

    $(window).resize(divResize);

    bindResize(document.getElementById('rightbar'));

    });

    .content {

    width: 200px;

    background: #f1f1f1;

    text-align: center;

    border-color: #CCCCCC;

    border-style: solid;

    border-width: 0 1px;

    }

    style="width: 2px; background: #cccccc; cursor: e-resize;">

    --%>

    待拖拽的div

    style="width: 2px; background: #cccccc; cursor: e-resize; float: left;">

    展开全文
  • jquery实现div拖拽宽度

    千次阅读 2013-07-31 13:26:07
    本文参考于:http://www.cnblogs.com/yelaiju/archive/2012/02/16/2354602.html 本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖 div width resize type=

    本文参考于:http://www.cnblogs.com/yelaiju/archive/2012/02/16/2354602.html

    本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html style="height:100%;">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>div width resize</title>
    <!--引用jquery-->
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"
    	type="text/javascript"></script>
    <script type="text/javascript">
            function bindResize(el)
            {
                //初始化参数
                var els = document.getElementById('menu').style;
                //鼠标的 X 和 Y 轴坐标
                x = 0;
                //邪恶的食指
                $(el).mousedown(function (e)
                {
                    //按下元素后,计算当前鼠标与对象计算后的坐标
                    x = e.clientX - el.offsetWidth - $("#menu").width();
                    //在支持 setCapture 做些东东
                    el.setCapture ? (
                    //捕捉焦点
                        el.setCapture(),
                    //设置事件
                        el.onmousemove = function (ev)
                        {
                            mouseMove(ev || event);
                        },
                        el.onmouseup = mouseUp
                    ) : (
                        //绑定事件
                        $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
                    );
                    //防止默认事件发生
                    e.preventDefault();
                });
                //移动事件
                function mouseMove(e)
                {
                    //宇宙超级无敌运算中...
                    els.width = e.clientX - x + 'px';
                }
                //停止事件
                function mouseUp()
                {
                    //在支持 releaseCapture 做些东东
                    el.releaseCapture ? (
                    //释放焦点
                        el.releaseCapture(),
                    //移除事件
                        el.onmousemove = el.onmouseup = null
                    ) : (
                        //卸载事件
                        $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
                    );
                }
            }
            var divResize=function(){
            	var totalHeight=$("html").height();
            	console.log(totalHeight);
            	var topHeight=$("#top").height()
            	$("#menu").height(totalHeight-topHeight);
            	$("#rightbar").height(totalHeight-topHeight);
            }
            $(function() {
            	divResize();
            	$(window).resize(divResize);
            	
                bindResize(document.getElementById('rightbar'));
            });
        </script>
    <style type="text/css">
    .content {
    	width: 200px;
    	background: #f1f1f1;
    	text-align: center;
    	border-color: #CCCCCC;
    	border-style: solid;
    	border-width: 0 1px;
    }
    </style>
    </head>
    <body style="padding: 0; margin: 0;">
    	<%--
    	<table style="height: 100%">
    		<tr>
    			<td id="menu" class="content"></td>
    			<td id="rightbar"
    				style="width: 2px; background: #cccccc; cursor: e-resize;"></td>
    		</tr>
    	</table>
    	--%>
    	<div>
    		<div id="top" style="width: 100%; height: 80px;"></div>
    		<div style="float: left;" id="menu" class="content">
    			<span>待拖拽的div</span>
    		</div>
    		<div id="rightbar"
    			style="width: 2px; background: #cccccc; cursor: e-resize; float: left;"></div>
    	</div>
    </body>
    </html>


    展开全文
  • DIV分栏宽度可以左右拖动变化的JS代码
  • vue 拖动div 改变宽度

    2021-08-14 14:58:25
    div class="box" > <div class="left"> <!--左侧div内容--> </div> <div class="resize" title="收缩侧边栏"> ⋮ </div> <div class="mid"> <!--右侧div内容--&...

    在这里插入图片描述

    <template>
      <div class="box" >
        <div class="left">
          <!--左侧div内容-->
        </div>
        <div class="resize" title="收缩侧边栏"></div>
        <div class="mid">
          <!--右侧div内容-->
          右侧
        </div>
      </div>
    </template>
    
    <script>
    export default {
      mounted() {
        this.dragControllerDiv();
      },
      methods: {
        dragControllerDiv() {
          var resize = document.getElementsByClassName("resize");
          var left = document.getElementsByClassName("left");
          var mid = document.getElementsByClassName("mid");
          var box = document.getElementsByClassName("box");
          for (let i = 0; i < resize.length; i++) {
            // 鼠标按下事件
            resize[i].onmousedown = function(e) {
              //颜色改变提醒
              resize[i].style.background = "#818181";
              var startX = e.clientX;
              resize[i].left = resize[i].offsetLeft;
              // 鼠标拖动事件
              document.onmousemove = function(e) {
                var endX = e.clientX;
                var moveLen = resize[i].left + (endX - startX); // (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
                var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
    
                if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
                if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
    
                resize[i].style.left = moveLen; // 设置左侧区域的宽度
    
                for (let j = 0; j < left.length; j++) {
                  left[j].style.width = moveLen + "px";
                  mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";
                }
              };
              // 鼠标松开事件
              document.onmouseup = function(evt) {
                //颜色恢复
                resize[i].style.background = "#d6d6d6";
                document.onmousemove = null;
                document.onmouseup = null;
                resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
              };
              resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
              return false;
            };
          }
        },
      },
    };
    </script>
    
    <style scoped>
    .box {
      width: 100%;
      height: 100%;
      margin: 1% 0px;
      overflow: hidden;
      box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
    }
    /*左侧div样式*/
    .left {
      width: calc(38% - 10px); /*左侧初始化宽度*/
        height: ~'calc(100vh - 140px)';
        overflow-y: auto;
        background: #ffffff;
        float: left;
    }
    /*拖拽区div样式*/
    .resize {
      cursor: col-resize;
      float: left;
      position: relative;
      top: 45%;
      background-color: #d6d6d6;
      border-radius: 5px;
      margin-top: -10px;
      width: 10px;
      height: 50px;
      background-size: cover;
      background-position: center;
      /*z-index: 99999;*/
      font-size: 32px;
      color: white;
    }
    /*拖拽区鼠标悬停样式*/
    .resize:hover {
      color: #444444;
    }
    /*右侧div'样式*/
    .mid {
      overflow-y: auto;
        // ==
        float: left;
        background: #fff;
        height: ~'calc(100vh - 140px)';
    }
    </style>
    ======================函数100%右边宽度=============================
     //拖动节点树div宽度函数
        dragControllerDiv() {
          let resize = document.getElementsByClassName('resize')
          let left = document.getElementsByClassName('form-tree')
          let mid = document.getElementsByClassName('form-table')
          let box = document.getElementsByClassName('form-template')
          for (let i = 0; i < resize.length; i++) {
            resize[i].onmousedown = function (e) {
              resize[i].style.background = '#818181'
              let startX = e.clientX
              resize[i].left = resize[i].offsetLeft
              document.onmousemove = function (e) {
                let endX = e.clientX
                let moveLen = resize[i].left + (endX - startX)
                let maxT = box[i].clientWidth - resize[i].offsetWidth
                if (moveLen < 32) moveLen = 32
                if (moveLen > maxT - 150) moveLen = maxT - 150
    
                resize[i].style.left = moveLen
    
                for (let j = 0; j < left.length; j++) {
                  left[j].style.width = moveLen + 'px'
                  // mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'
                  mid[j].style.width = '100%'
                }
              }
    
              document.onmouseup = function (evt) {
                resize[i].style.background = '#d6d6d6'
                document.onmousemove = null
                document.onmouseup = null
                resize[i].releaseCapture && resize[i].releaseCapture()
              }
              resize[i].setCapture && resize[i].setCapture()
              return false
            }
          }
        },
    
    展开全文
  • 主要介绍了vue中实现拖动调整左右两侧div宽度的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • div拖拽改变其宽度

    2021-09-17 13:50:45
    #leftDiv { width:300px; height:500px; border:1px red solid; border-right:none; float:left; } #splitDiv { float:left; width:1px; height:500px; border-left:1px blue solid; } #rightDiv { margin...
  • div拖动改变宽度

    2021-06-22 20:23:25
    整理后,简化为只有两个div的情况,左边div位置不变宽度可变,右边div宽度和x坐标可以随着鼠标拖动改变。 <html> <style> .box{ width:100%; height:1000px; } .left{ width:49%; height:100%; ...
  • 实现div宽度拖动

    2020-12-25 11:30:12
    <template>...div class="box" ref="box"> <div class="left"> 左侧div内容 </div> <div class="resize" title="收缩侧边栏"> ⋮ </div> <div class="mid">
  • 前端拖拽改变两个div宽度

    千次阅读 2019-08-17 11:58:33
    左右排版的div 容器,可以拖动改变div 宽度的占比。 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Resizable Div Container</title&...
  • vue 拖动调整左右两侧div宽度

    千次阅读 2019-10-03 14:56:15
    原文是左中右三种情况的拖动。由于项目需要,我删除掉了右边的,直接左右区域拖动调整div宽度 1、拖动,调整左右两侧宽度 <template> <div class="wid100 hig100"> <ul class="b...
  • div 拖拽改变容器宽度

    2018-01-23 10:46:00
    左右排版的 div 容器,可以拖动改变 div 宽度的占比。 完整代码: <!DOCTYPE html> <title>Resizable Div Container 可以对div进行拖动缩放大小"> #container.resizable { width: 100%; ...
  • 引入:jquery-ui-1.10.4.min.js 加上一个属性:west__showOverflowOnHover: true ...div的样式: <div class="ui-layout-west"> </div> <div class="ui-layout-center"> </div> ...
  • 最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样 一、HTML代码 <templete> <div class="box" ref="box"> <div class="left"> <!--左侧div内容-...
  • vue拖动改变div宽度

    千次阅读 2020-04-14 17:13:49
    TextWidthChange(e) { let odivParent = e.currentTarget.parentNode; //获取目标父元素 let dx= e.clientX;//当你第一次单击的时候,存储x轴的坐标。 let dw= odivParent....//存储默认的div宽度。 docum...
  •  【拖动右侧改变div宽度】一开始也挺蒙的,不晓得思路,我就思考,先是获取到右侧的边缘-&gt;触发事件-&gt;拖动--&gt;改变宽度;然后都不晓得怎么实现.我发挥面向百度编程一波下来,找到一个类似博客...
  • {box-sizing:border-...moz-box-sizing:border-box}#testDiv{background-color:buttonface;background-repeat:repeat;background-attachment:scroll;color:#3969A5;height:300px;left:30px;overflow:hidden;width:...
  • HTML:鼠标移动到矩形分割线JS:$(function (){$(".resizable1").resizable({autoHide: true,handles: 'e',resize: function(e, ui){var parent = ui.element.parent();var remainingSpace = parent.width() - ui....
  • <template>...div class="box-wrap"> <div class="box" id="box"></div> <div class="drag-btn" id="dragBtn" @mousedown.stop.prevent="mouseDownLeft"></div> ...
  • Vue---拖动侧边栏改变div宽度

    千次阅读 2019-08-15 10:23:00
    实现左右拖拽布局功能:当拖动分割线时,可以重置左右两侧模块宽度实现宽度自定义。 首先搞清楚几个值的概念 (1)clientX 与 clientWidth clientX:鼠标点击时位置距离当前body可视区域的x坐标 clientWidth: (2)...
  • 实现左右拖拽布局功能:当拖动分割线时,可以重置左右两侧模块宽度实现宽度自定义。 首先搞清楚几个值的概念 (1)clientX clientX:鼠标点击时位置距离当前body可视区域的x坐标 (2)left 相对于具有定位属性...
  • 鼠标点击按下,拖拽,整个div拖动,自身宽度不发生变化 修改mousedown() 中的this.el, self.modal就可以用了 $(".modal_head", this.el).mousedown(function(e) { if(!$(e.target).hasClass("dialog-close")) { ...
  • 实现div边框可拖拽改变宽度

    万次阅读 2019-07-17 20:01:09
    项目要求实现目录和文章内容之间可以拖拽自由改变宽度,百度了很多,然后自己改了一下,效果如下。 html代码 《》

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,703
精华内容 7,881
关键字:

div拖动宽度