div 拖动改变大小

拖拽调整Div大小

今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. (function ($) { $.fn.dragDivResize = function () { var deltaX, deltaY, _startX, _startY; var resizeW, resizeH; var size = 20; var minSize = 10; var scroll = getScrollOffsets(); var _this = this; for (var i = 0;

node-webkit学习之【无边框窗口用JS实现拖动改变大小等】

效果如下图原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name": "nw-quick-start-demo", //(字符串)包的名字,必须为独一无二的,可由字母,数字,下划线组成,不能有空格.( "version": "0.0.1", "main": "app/test/dist

node-webkit无边框窗口用纯JS实现拖动改变大小

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script src="../jquery-1.11.0.min.js"></script> <l

jquery 拖动改变div大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS 实现 ResizeBar，可拖动改变两个区域(带iframe)大小

将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slider,出来的结果都是关于滑动块的,最后搜索resize bar才找到正确的结果.解决方案:jsfiddle的一个示例 http://jsfiddle.net/gaby/Bek9L/186/以上示例能实现滑动效果,但是当鼠标移动到右侧的iframe时,鼠标移动时 $(document).mousemo

【转】C# 控件的自定义拖动、改变大小方法

在用VS的窗体设计器时,我们可以发现控件都是可以拖动的,并且还可以调整大小.怎么在自己的程序中可以使用上述功能呢? 下面的方法值得借鉴! using System; using System.Windows.Forms; using System.Drawing; namespace ControlSizeChangeEx { /// <summary> /// This class implements sizing and moving functions for /// runtime

jQuery实现鼠标拖动改变Div高度

最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做页面美化,可以根据需求做相应修改. 直接上代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

Qt：无标题栏无边框程序的拖动和改变大小

From: http://blog.csdn.net/kfbyj/article/details/9284923 最近做项目遇到的问题,总结下. 有时候我们觉得系统的标题栏和按钮太丑太呆板,想做自己的标题栏以及最大化.最小化.关闭,菜单按钮,我们就需要 setWindowFlags(Qt::FramelessWindowHint); 但是这样过后,我们就不能拖动窗口改变位置,以及拖动边缘改变窗口大小了. 有两种方案处理这种情况: 1.自己对mouseMoveEvent,mousePressEve

WPF 窗体中的 Canvas 限定范围拖动鼠标滚轴改变大小

xaml代码: <Canvas Name="movBg"> <Canvas.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="White" Offset="0" /> <GradientStop Color="#F

Qt 无标题无边框程序的拖动和改变大小

最近做项目遇到的问题,总结下. 有时候我们觉得系统的标题栏和按钮太丑太呆板,想做自己的标题栏以及最大化.最小化.关闭,菜单按钮,我们就需要 setWindowFlags(Qt::FramelessWindowHint); 但是这样过后,我们就不能拖动窗口改变位置,以及拖动边缘改变窗口大小了. 有两种方案处理这种情况: 1.自己对mouseMoveEvent,mousePressEvent,mouseReleaseEvent 等事件进行处理. 2.Qt可以处理windows的消息.大家重新实现bo

JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小.最大化.最小化.关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变.还原及关闭等功能的相关实现技巧,需要的朋友可以参考下本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最

iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Qt 无边框窗体改变大小完美实现（全部自己实现）

近期,做项目用到无边框窗体,令人蛋疼的是无边框窗体大小的改变要像右边框那样,上下左右四周,而且要流畅. 网上也找了些代码,发现居然还要连接到windows事件,这显然不合常理,后来自己新建了demo,写了一个小时,问题太多了,扔一边先不管了. 今天需要改进UI界面,没办法了,重新整理了下思路,没想到做出来了.下面来分享下实现的过程,也许是菜鸟专栏,高手勿喷~ 1.首先大家要了解各九宫格的概念一个窗体可以被划分为上.下.左.右.左上.左下.右上.右下.中间,除了中间部分,其他都需要写程序处理.

jquery div拖动效果示例代码

div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

Qt 无边框窗体改变大小完美实现

近期,做项目用到无边框窗体,令人蛋疼的是无边框窗体大小的改变要像右边框那样,上下左右四周,而且要流畅. 网上也找了些代码,发现居然还要连接到windows事件,这显然不合常理,后来自己新建了demo,写了一个小时,问题太多了,扔一边先不管了. 今天需要改进UI界面,没办法了,重新整理了下思路,没想到做出来了.下面来分享下实现的过程,也许是菜鸟专栏,高手勿喷~ 1.首先大家要了解各九宫格的概念一个窗体可以被划分为上.下.左.右.左上.左下.右上.右下.中间,除了中间部分,其他都需要写程序处理.

canvas实现鼠标拖拽矩形移动改变大小

项目的一个新需求,动态生成矩形框,鼠标点击拖动改变矩形框的位置,并可以调整大小. 之前做过一个小demo,需求类似,但是在canvas内只有一个矩形框,拖动移动,当时记得是用isPointInPath()直接判断鼠标是否点在了矩形框以内.新需求的矩形框个数为n,经过测试,isPointinPath实现过程中有bug,并不能精准定位到具体点击到canvas的某一个矩形框.经过一系列的头脑风暴,才想出了解决办法,才发现原来是最简单的方法,但是在思考的当初就被pass了,见代码: html: <bod

给div加上padding和border，如何不让div整体改变

最近要入门H5,遇到很多困惑,所以,每解决一个,我就要写在博客里,以防忘记! 给div加上padding和border,如何不让div整体改变? 如果想要实现这样的效果,只需要在这个div块中写入 box-sizing:border-box; CSS3 box-sizing属性有3个值 1 : content-box; 我想这个值就是一般浏览器的默认的,div的实际宽度 = div的width + pading + border;(标准盒模型) 2 : border-box; 这个值可以不让

Android：图片中叠加文字，支持拖动改变位置

之所以做了这么一个Demo,是由于近期项目中有一个奇葩的需求:用户拍摄照片后,分享到微信的同一时候加入备注,想获取用户在微信的弹出框输入的内容.保存在自己的server上.而其实,这个内容程序是无法获取的,因此採取了一个折衷方案,将文字直接写在图片上. 首先上Demo效果图: 功能: 1.用户自由输入内容,可手动换行,而且行满也会自己主动换行. 2.可拖动改变图片中文本位置(文字不会超出图片区域). 3.点击"生成图片"button之后,生成一张带有文字的图片文件. 代码不多,直接所有

c# 可移动可改变大小的控件

因为业务需要,百度了个可移动可改变大小的控件,然后自己修改了下,功能类似vs的设计面板中的功能差不多,可拖拽,改变大小拖动的 public class MoveControl { #region 自定义事件 /// <summary> /// 控件移动时触发事件 /// </summary> public event EventHandler ControlMoving; /// <summary> /// 控件移动完成触发事件 /// </summary>

让一个div拖动和让一个panel拖动加拉大拉小

一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery:鼠标拖动DIV</title> <style t

js实现一个可以兼容PC端和移动端的div拖动效果

前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouseup在移动端都不起任何作用.毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart.touchmove.touchend事件.还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.

div 拖动改变大小

热门专题