php 页面拖动改变大小,鼠标拖动改变DIV等网页元素的大小的实现方法
1.初次实现
1.1 html代码
div change width by drag
div change width by drag
1.2 js代码
var eleLeft = $('#myDiv').offset().left;
var isMouseDown = false;
var borderLen = 4; //左右边框
$('#myDiv').bind({
mousedown:function(e){
var ele = $(this);
var rightPos = eleLeft + ele.width() + borderLen;
if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
isMouseDown = true;
}
},
mousemove:function(e){
var ele = $(this);
var rightPos = eleLeft + ele.width() + borderLen;
$('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);
if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
ele.css('cursor','e-resize');
}else{
if(!isMouseDown){
ele.css('cursor','auto');
}
}
if(isMouseDown){
ele.width((e.pageX-eleLeft-borderLen)+'px'); //新鼠标位置-div距左-borderLen
}
},
mouseup:function(e){
isMouseDown = false;
}
});
1.3 结果
只能往左拖动使div宽度变小,往右拖动没有用!原因往右拖动鼠标mousemove事件无法被div捕获了。拖动时也很难停下来!所以得改进。
2.再次改进
$('#myDiv').bind({
mousedown:function(e){
var ele = $(this);
var rightPos = eleLeft + ele.width() + borderLen;
if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
isMouseDown = true;
}
}
});
$('body').bind({
mousemove:function(e){
var ele = $('#myDiv');
var rightPos = eleLeft + ele.width() + borderLen;
$('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);
if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
ele.css('cursor','e-resize');
}else{
if(!isMouseDown){
ele.css('cursor','auto');
}
}
if(isMouseDown){
ele.width((e.pageX-eleLeft-borderLen)+'px');
}
},
mouseup:function(e){
isMouseDown = false;
}
});
这次解决了上述问题,可以往右拖,并且随时可以停下来了。到这里就完成了吗?NO!
当我引入一个其他div,并且阻止mouseup事件冒泡情况怎么样呢?答案是,拖动到这个其它div上放开鼠标后无法停止下来!
$('#otherDiv').mouseup(function(e){
//e.preventDefault(); //阻止默认行为
e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)
});
3.完美解决
拖动停止可能受到其它元素的干扰,怎么解决?想到一些弹出层点击其它其它地方隐藏的功能,让我想到了,加一个遮罩层,让mouseup事件总是可以响应,不就搞定了嘛!
$('#myDiv').bind({
mousedown:function(e){
var ele = $(this);
var rightPos = eleLeft + ele.width() + borderLen;
if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
isMouseDown = true;
//创建遮罩层,防止mouseup事件被其它元素阻止冒泡,导致mouseup事件无法被body捕获,导致拖动不能停止
var bodyWidth = $('body').width();
var bodyHeight = $('body').height();
$('body').append('
}
}
});
$('body').bind({
mousemove:function(e){
var ele = $('#myDiv');
var rightPos = eleLeft + ele.width() + borderLen;
$('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);
if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
ele.css('cursor','e-resize');
}else{
if(!isMouseDown){
ele.css('cursor','auto');
}
}
if(isMouseDown){
ele.width((e.pageX-eleLeft-borderLen)+'px');
}
},
mouseup:function(e){
isMouseDown = false;
$('#mask').remove();
}
});
$('#otherDiv').mouseup(function(e){
//e.preventDefault(); //阻止默认行为
e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)
});
4.完整代码和最终效果
div change width by drag
div change width by drag
$(document).ready(function(){
var eleLeft = $('#myDiv').offset().left;
var isMouseDown = false;
var borderLen = 4; //左右边框
$('#myDiv').bind({
mousedown:function(e){
var ele = $(this);
var rightPos = eleLeft + ele.width() + borderLen;
if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
isMouseDown = true;
//创建遮罩层,防止mouseup事件被其它元素阻止冒泡,导致mouseup事件无法被body捕获,导致拖动不能停止
var bodyWidth = $('body').width();
var bodyHeight = $('body').height();
$('body').append('
}
}
});
$('body').bind({
mousemove:function(e){
var ele = $('#myDiv');
var rightPos = eleLeft + ele.width() + borderLen;
$('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);
if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
ele.css('cursor','e-resize');
}else{
if(!isMouseDown){
ele.css('cursor','auto');
}
}
if(isMouseDown){
ele.width((e.pageX-eleLeft-borderLen)+'px');
}
},
mouseup:function(e){
isMouseDown = false;
$('#mask').remove();
}
});
$('#otherDiv').mouseup(function(e){
//e.preventDefault(); //阻止默认行为
e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)
});
});
以上这篇鼠标拖动改变DIV等网页元素的大小的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
php 页面拖动改变大小,鼠标拖动改变DIV等网页元素的大小的实现方法相关推荐
- 鼠标拖动改变DIV等网页元素的大小的最佳实践
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...
- JS拖动事件(鼠标拖动事件)手指事件(PC移动端拖拽)
写了好几次的PC端和移动端的拖拽效果了,每次都要重新查阅资料,现在做个总结记录,方便以后随时查阅 要想写拖拽事件,首先得了解三块知识点: PC的鼠标拖动事件 移动端的手指事件 能拿到被移动元素的高宽, ...
- python模拟鼠标拖动_python模拟鼠标拖动操作
1.[代码][Python]代码 # # _*_ coding:UTF-8 _*_ __author__ = 'wp' import win32api import win32con import w ...
- python 视频播放 拖动_python + opencv鼠标拖动视频区域裁剪
# -*- coding: utf-8 -*- import sys import cv2 import numpyas np import time import sys # # from PyQt ...
- html 禁止拖动图片,禁止鼠标拖动图片在新窗口打开
JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,name,parameters) 其中: pageU ...
- android网页声音大小设置在哪里,怎样调节网页声音的大小
工具/原料 windows操作系统 方法/步骤 1.首先我来介绍一下调节效率不高的一种方法.即,按住win+D进入桌面,右键单击,选定"查看"项目.在弹出的菜单中左键单击" ...
- C# 创建一个Panel并可以通过鼠标拖动并可以拉动改变大小(可生成多个Panel并保存布局到数据库中)
C# 创建一个Panel并可以通过鼠标拖动并可以拉动改变大小(可生成多个Panel并保存布局到数据库中) 一个用于绘制视频布局的控件,可在背景Panel上生成新的Panel并可以拖动改变位置以及调整大 ...
- Jquery实现鼠标拖动改变div高度
前言 鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做页面美化,可以根据需求做相应修改. 转自:http://www.cnblog ...
- javaScript实现通过鼠标滑轮改变元素大小
原生js实现通过鼠标滑轮改变元素大小 <!DOCTYPE html> <html lang="en"><head><meta charse ...
最新文章
- 让Windows下的Tomcat将控制台信息记录到日志
- 如何在Ruby中获得随机数
- OAuth2.0 工作流程
- metal分析是什么意思_metal分析.pptx
- 杠上了,Linus 再次怒喷 Intel 直言“去死”
- .NET、C#和ASP.NET,ASP.NET MVC 四者之间的区别
- 计算机基础- -计算机为什么要使用二进制
- java barrier_Java并发类CyclicBarrier方法详解
- 学习 | 雷军 1994 年写的代码,不服不行
- python输出由1234组成的三位素数_编写程序,输出所有由 1 、 2 、 3 、 4 这 4 个数字组成的素数,并且在每个素数中每个数字只使用依次。_学小易找答案...
- MySQL一主二从复制环境切换主从库
- BZOJ(本校) 3046 简单数学问题 - 线段树
- 软件工程第一次作业(2)
- AutoCAD 2022 for Mac v2022.2.1中文版
- 以ASK调制解调为例观察采样与成型滤波的MATLAB仿真
- 如何避开微信小程序的审核机制(实测有效)
- 操盘手怎样于2019年4月17号的二级市场中基于ATR实现开仓平仓
- java 等额本金与等额本息
- Linux文件I/O实验报告
- ddd java 例子_【Java】DDD思维导图
热门文章
- PYTHON解析XML的多种方式效率对比实测
- Visual SourceSafe使用流程指南
- mysql left join 右表数据不唯一的情况解决方法
- tcp的粘包和拆包示例以及使用LengthFieldFrameDecoder来解决的方法
- 【报告分享】2020社交电商消费者购物行为研究报告:传统与创新进入融合时代.pdf(附下载链接)...
- RSPapers | 工业界推荐系统论文合集
- 【报告分享】2019年中国智能门锁发展与应用白皮书.pdf
- 数据挖掘竞赛,算法刷题网址汇总
- 【论文】Awesome Relation Classification Paper(关系分类)(PART I)
- oracle12c加密ted,使用Oracle Wrap工具加密你的代码