js实现鼠标拖拽缩放div实例代码
作者：看淡江湖 发布时间：2024-05-13 10:38:12
标签：js,div拖拽
封装为了jq插件，如下
drag.js
;(function ($) {
$.fn.dragDiv = function (options) {
var def = {
maxW:600,// 可伸缩的最大宽度
minW:50// 可伸缩的最小宽度
};// 参数默认值
var opts = $.extend(def,options);// 扩展参数，使用默认值或传参
//设置最大/最小宽度
var max_width = opts.maxW,
min_width = opts.minW;
//记录鼠标相对left盒子x轴位置
var mouse_x = 0;
var left = $(this).parent('div')[0];
//鼠标移动事件
function mouseMove(e) {
var e = e || window.event;
var left_width = e.clientX - mouse_x;// 可伸缩div的宽度
left_width = left_width < min_width ? min_width : left_width;
left_width = left_width > max_width ? max_width : left_width;
left.style.width = left_width + "px";
}
//终止事件
function mouseUp() {
document.onmousemove = null;
document.onmouseup = null;
}
$(this).mousedown(function (e) {
var e = e || window.event;
//阻止默认事件
e.preventDefault();
mouse_x = e.clientX - left.offsetWidth;// 可伸缩div距离左侧边界的宽度
document.onmousemove = function () {
mouseMove()
};
document.onmouseup = function () {
mouseUp()
};
})
}
})(jQuery)
html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标进行伸缩div</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.dragdom {
background: #cccccc;
width: 100px;
height: 600px;
margin: 0 auto;
position: relative;
}
.dragdom .drag {
border: 1px transparent solid;
width: 0px;
height: 100％;
position: absolute;
top: 0;
right: 0;
cursor: e-resize;
}
</style>
</head>
<body>
<div class="dragdom"><div class="drag"></div></div>
</body>
</html>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./drag.js"></script>
<script>
$(function () {
$('.drag').dragDiv();
})
</script>
以上所述是小编给大家介绍的js实现鼠标拖拽缩放div详解整合网站的支持！
来源：https://blog.csdn.net/hhy1006894859/article/details/88655510
0
投稿猜你喜欢
- 本文实例分析了Python闭包执行时值的传递方式。分享给大家供大家参考，具体如下：代码中有问题和问题的解释。#!/usr/bin/pytho
- 如下所示：######### Extract all files from src_dir to des_dirdef extract_ta
- 1. 真值测试所谓真值测试，是指当一种类型对象出现在if或者while条件语句中时，对象值表现为True或者False。弄清楚各种情况下的真
网易云音乐排行榜歌曲及评论爬取主要注意问题：selenium 模拟登录、iframe标签定位、页面元素提取。在利用selenium定位元素并- 前言Vue2.x 使用 EventBus 事件总线进行兄弟组件通信，而在Vue3中事件总线模式已经被移除，官方建议使用外
- 本文实例讲述了Python实现PS滤镜特效之扇形变换效果。分享给大家供大家参考，具体如下：这里用 Python 实现 PS 滤镜中的一种几何
- 目录1.简介2.list2.1数据结构2.2插入元素3.ring3.1数据结构4.heap4.1数据结构1.简介Container — 容器
- 因为老策略一直能用，一直没有看新版signature。本文做一下分析记录。断点调试堆栈进来之后，url中signature已经有了shift
- 下面一段代码给大家介绍python 脚本生成随机 字母 + 数字密码功能，具体代码如下所述：#coding:utf-8import rand
- Simple Nested-Loop Join我们来看一下当进行 join 操作时，mysql是如何工作的。常见的 join 方式有哪些？如
- 本文实例讲述了js对象基础用法。分享给大家供大家参考。具体分析如下：js对象在本质上与数组相同，都是存放一组数据。但创建方法有所不同，对象需
- 本文实例讲述了php+html5基于websocket实现聊天室的方法。分享给大家供大家参考。具体如下：html5的websocket 实现
- 1. 把数字转换成字符串，应用"" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：("&
- 1、连接数据库 driver={SQL Server};server=服务器IP;uid=用户名;pwd=密码;database=数据库名
- 一、背景描述csv格式文件是一种类似于excel的文件格式asc格式文件是一种可以用text打开的文本文件csv转asc本来可以用arcgi
- 前言最近有网友私信我，问如何把多张图片合成一张马赛克图片的样子说是女儿从出生到现在，所有的照片，大概有上百张，所以想使用这些照片合成一张，当
- 函数最重要的目的是方便我们重复使用相同的一段程序。将一些操作隶属于一个函数，以后你想实现相同的操作的时候，只用调用函数名就可以，而不需要重复
- tk在科学养猪群里问bluerust、scz是否碰上过这个Python坑，示例1：bas = [ 'ba1', 'b
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 众所周知，如果py文件不在当前路径，那么就不能import，因此，本文介绍如下两种有效的方法：方法1：修改环境变量，在~/.bashrc里面
