鼠标拖动改变div容器的大小

妖狐艹你老母 2022-06-05 07:20 285阅读 0赞

html代码如下：

<div class="fu">  
      <div class="zi1">1111</div>  
      <div class="zi2" style="cursor:col-risize;" unselectable="on"  user-select: none;>2222</div>  
      <div class="zi3">3333</div>  
</div>

css代码如下：

<style>  
      .fu\{  
        width: 100%;  
        position: relative;  
        height: 500px;  
      \}  
      .zi1\{  
        position: absolute;  
        left: 0;  
        background: green;  
        width: 100%;  
        z-index: 5;  
        height: 100%;  
      \}  
      .zi2\{  
        position: absolute;  
        left: 100px;  
        background: red;  
        width: 5px;  
        z-index: 7;  
        height: 100%;  
      \}  
      .zi3\{  
        position: absolute;  
        left: 105px;  
        background: orange;  
        width: 100%;  
        z-index: 10;  
        height: 100%;  
      \}  
    </style>

js代码如下：

<script>  
      var shifou=false                                                      //设定一个变量用来改变true/false的状态  
      function tuozhuai()\{  
            $(document).mousemove(function(e)\{  
                if (shifou) \{  
                var zix=e.pageX;        //获取鼠标移动事件的X坐标  
                var zix1=zix+5  
                var zi3width=$('.fu').width()        //获取父容器的宽度  
                var zi3movewidth=zi3width-zix     //获取鼠标移动后子容器的宽度  
                $('.zi2').css('left',zix)                  //设置子容器的left值  
                $('.zi3').css('left',zix1)                //设置子容器的left值  
                $('.zi3').width(zi3movewidth)      //设置子容器的宽度  
                \}  
            \})         
      \}  
      $('.zi2').mousedown(function()\{            //鼠标mousedown时调用上面的函数  
        shifou=true;  
        tuozhuai()  
      \})  
      $('.zi2').mouseup(function()\{                //鼠标mouseup时改变shifou的值  
        shifou=false;  
      \})  
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关 js时实现鼠标拖动div

实现js拖动div 实现步骤： 1. 鼠标按下时，标记元素为可拖动状态，并记下鼠标当前位置的偏移； 2. 鼠标开始移动，判断元素状态是否可以拖动，如果是则更新元素位置

清疚/ 2023年07月24日 05:37/ 0 赞/ 25 阅读

相关 (html/javascript)可以用鼠标自由拖动的div（收藏）

<html><head> <title>测试可动div</title> <script language='JavaScript' type='text

分手后的思念是犯贱/ 2022年09月21日 05:56/ 0 赞/ 77 阅读

相关 js实现div动态改变大小

网上看到的相关代码，记下，以备日后使用。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

痛定思痛。/ 2022年08月20日 06:09/ 0 赞/ 373 阅读

相关 div八点大小改变

依旧是学习的别人的,模仿的(Ps:我自己也先有写一遍,只是觉得自己写的确实没别人好,就模仿别人了) <!DOCTYPE html PUBLIC "-//W3C//DTD

╰半夏微凉°/ 2022年08月06日 06:22/ 0 赞/ 189 阅读

相关可拖动的DIV

<!DOCTYPE html> <html> <head> <title>test</title> <script sr

淡淡的烟草味﹌/ 2022年06月14日 02:18/ 0 赞/ 285 阅读

相关鼠标拖动改变div容器的大小

html代码如下： <div class="fu"> <div class="zi1">1111</div> <div class="zi2"

妖狐艹你老母/ 2022年06月05日 07:20/ 0 赞/ 286 阅读

相关实现div鼠标拖动效果

实现这个效果的关键是给div的定位设置成absolute,然后获得鼠标移动后的位置坐标并给要移动的div。我将它封装成了一个函数，只需要传入参数即可使用。 dow

深碍√TFBOYSˉ_/ 2022年05月13日 07:36/ 0 赞/ 299 阅读

相关 MFC_改变窗口大小，随着鼠标的拖动改变

今天在做一个视频播放器的时候，需要用到不同电脑之间分辨率的不同，让其根据当前电脑的分辨率显示其大小首先假设这个对话框类为CMyDialog。这篇文章转载了：http

电玩女神/ 2021年11月26日 23:31/ 0 赞/ 457 阅读

相关鼠标的拖动操作

unit Unit1; interface uses Windows, Messages, SysUtils, Vari

超、凢脫俗/ 2021年11月02日 15:56/ 0 赞/ 388 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 491 阅读