jquery 实现div边界拖拽控制大小

html

<div id="container">
    <!-- Left side -->
    <div id="left"> This is the left side‘s content! </div>
    <!-- Right side -->
    <div id="right">
        <!-- Actual resize handle -->
        <div id="handle"></div> This is the right side‘s content!
    </div>
</div>

css

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;
    /* Disable selection so it doesn‘t get annoying */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
#container #left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 100px;
    background: red;
}
#container #right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    background: blue;
}
#container #handle {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize;
}

js

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $(‘#container‘),
        left = $(‘#left‘),
        right = $(‘#right‘),
        handle = $(‘#handle‘);

    handle.on(‘mousedown‘, function (e) {
        isResizing = true;
        lastDownX = e.clientX;
    });

    $(document).on(‘mousemove‘, function (e) {
        // we don‘t want to do anything if we aren‘t resizing.
        if (!isResizing)
            return;

        var offsetRight = container.width() - (e.clientX - container.offset().left);

        left.css(‘right‘, offsetRight);
        right.css(‘width‘, offsetRight);
    }).on(‘mouseup‘, function (e) {
        // stop resizing
        isResizing = false;
    });
});
时间: 2024-10-20 05:37:54

jquery 实现div边界拖拽控制大小的相关文章

jQuery实现div横向拖拽排序

参考:https://blog.csdn.net/kongjiea/article/details/45578033 效果图: html <h1>div横向拖拽排序</h1> <div class="box"> <div class="horizontal-div" id="div1">div1</div> <div class="horizontal-div"

jquery.dragsort.js 实现拖拽过程遇到的问题

1.在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative.这个问题在火狐等其他浏览器是不存在的. 2.如果拖动的li所在容器出现了滚动条,当滚动条滑到最下面的时候,拖拽下面的li的浮动层位置会出现偏移.解决的办法是在jquery.dragsort.js中,this.draggedItem.css({ top: top, left: left });这句

js 利用jquery.gridly.js实现拖拽并且排序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src='javascripts/jquery.js' type='text/javascript'></script> <script src='javascripts/jqu

qt 拖拽 修改大小(二)

最近项目需要实现windows下橡皮筋的效果,所以对此做了一些了解,特此记录. 首先windows系统是支持橡皮筋效果的,需要使用win32方 法:SystemParametersInfo(SPI_SETDRAGFULLWINDOWS, showFullWindow, NULL, 0);showFullWindow是一个变量,如果需要windows默认支持橡皮筋则需要传递参数false,否则传递参数true,如果使用 windows默认的橡皮筋缩放,效果如图1所示,会产生一个矩形框,不管是窗口移

FMX ScrollBox 拖拽控制

Firemonkey下的ScrollBox 拖拽控制,滚动控制. AniCalculations 仅允许纵向拖拽 scrlbx.AniCalculations.TouchTracking := [System.UITypes.ttVertical]; 锁死不让拖拽. StringGrid1.AniCalculations.TouchTracking :=[]; StringGrid1.AniCalculations.AutoShowing:=false; AniCalculations.Boun

Blend Grid行列拖拽控制宽高

原文:Blend Grid行列拖拽控制宽高 看效果 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="212*"/> <ColumnDefinition Width="9*"/> <ColumnDefinition Width="296*"/> </Grid.ColumnDefinitions> <Grid

jQuery UI API - 可拖拽小部件(Draggable Widget)(转)

所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse Interaction) 注释:让被选元素可被鼠标拖拽.如果您不只是拖拽,而是拖拽 & 放置,请查看 jQuery UI 可放置(Droppable)插件,为可拖拽元素提供了一个放置目标. 快速导航 选项 方法 事件 addClasses appendTo axis cancel connectToS

qt 拖拽 修改大小

写次篇文章之前,qt窗口的放大缩小和拖拽我都是通过setGeometry方法实现的,但是作为windows程序,windows支持橡 皮筋式(拖拽时有一个虚框)拖拽和拉伸.通过setGeometry方式实现功能是没有这种效果,幸好qt5中提供了一个本地事件处理接口 nativeEvent,具体功能可以看帮助文档,本文只讲述用该接口实现窗口放大.缩小和拖拽,具体实现代码如下: 1 virtual bool nativeEvent(const QByteArray &, void *, long *

一款基于jQuery的支持鼠标拖拽滑动焦点图

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片. 在线预览   源码下载 实现的代码. html代码: <div class="main_visual"> <div class="flicking_con"> <a class="on" href=&quo