当前位置：首页 → 问答吧 → 鼠标拖拽改大小的问题

鼠标拖拽改大小的问题

时间：2010-05-28

来源：互联网

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="Editplus4PHP" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="fanfan,[email protected]" /> <link rel="shortcut icon" href="images/favicon.ico" /> <title>Example | xHTML1.0</title> <style type="text/css"> *{margin:0;padding:0;list-style:none outside none;} .box{width:400px;height:300px;padding:3px;background:#f5f5f5;border:solid 1px #ccc;margin:50px auto;position:relative;} .content{width:100%;height:100%;background:#fff;} #r_b{position:absolute;width:5px;height:5px;bottom:0;right:0;z-index:99;background:#f00;cursor:nw-resize;} </style> </head> <body> <div class="box" id="box" > <div class="content" id="content"> 123 </div> <div id="r_b"></div> </div> </body> </html> <script type="text/javascript">  </script>
提示：您可以先修改部分代码再运行

第一次改大小的情况还好,
但是松开以后再点击右下角改大小就有问题了.
拖动不改大小,但是松开鼠标以后,又跟着鼠标改大小了,

或者在第二次开大小之前,鼠标点击空白处也可以正常改大小

这是哪里出了问题啊.

作者: 4321285 发布时间: 2010-05-28

拖动的时候要处理选中。第二次时，拖动的小块已经处于选中状态。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="Editplus4PHP" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="fanfan,[email protected]" /> <link rel="shortcut icon" href="images/favicon.ico" /> <title>Example | xHTML1.0</title> <style type="text/css"> *{margin:0;padding:0;list-style:none outside none;} .box{width:400px;height:300px;padding:3px;background:#f5f5f5;border:solid 1px #ccc;margin:50px auto;position:relative;} .content{width:100%;height:100%;background:#fff;} #r_b{position:absolute;width:5px;height:5px;bottom:0;right:0;z-index:99;background:#f00;cursor:nw-resize; /*阻止选中*/ -moz-user-select:none; -khtml-user-select:none; user-select: none; } </style> </head> <body> <div class="box" id="box" > <div class="content" id="content"> 123 </div> <div id="r_b"></div> </div> </body> </html> <script type="text/javascript">  </script>
提示：您可以先修改部分代码再运行

作者: trarck 发布时间: 2010-05-28

已经解决了.谢谢..

作者: 4321285 发布时间: 2010-05-28

2楼的朋友还是有一样的情况

作者: sggtong 发布时间: 2010-05-28

引用:

原帖由 4321285 于 2010-5-28 12:47 发表
已经解决了.谢谢..

楼主能分享下代码吗?

作者: sggtong 发布时间: 2010-05-28

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="Editplus4PHP" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="fanfan,[email protected]" /> <link rel="shortcut icon" href="images/favicon.ico" /> <title>Example | xHTML1.0</title> <style type="text/css"> *{margin:0;padding:0;list-style:none outside none;} .box{width:400px;height:300px;padding:3px;background:#f5f5f5;border:solid 1px #ccc;margin:50px auto;position:relative;} .content{width:100%;height:100%;background:#fff;} #r_b{position:absolute;width:5px;height:5px;bottom:0;right:0;z-index:99;background:#f00;cursor:nw-resize;} </style> </head> <body> <div class="box" id="box" > <div class="content" id="content"> 123 </div> <div id="r_b"></div> </div> </body> </html> <script type="text/javascript">  </script>
提示：您可以先修改部分代码再运行

囧 chrome下还是有点问题
2楼的方法也可以的.

[ 本帖最后由 4321285 于 2010-5-28 15:02 编辑 ]

作者: 4321285 发布时间: 2010-05-28

为什么我在测试的时候,还是会出现搂住说的现在,只要有一次拖不动鼠标,松开鼠标后就会跟鼠标改变大小了

作者: sggtong 发布时间: 2010-05-28

不错啊
我也写过类似的拖拉缩放效果

作者: cloudgamer 发布时间: 2010-05-29