鼠标拖拽改变div的大小

最新推荐文章于 2024-12-10 18:26:38 发布

原创最新推荐文章于 2024-12-10 18:26:38 发布 · 7k 阅读

4 ·

CC 4.0 BY-SA版权

js/jQuery 专栏收录该内容

21 篇文章

订阅专栏

这篇博客介绍了如何利用jQuery插件来创建前端效果，特别是实现鼠标拖拽改变div尺寸的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：

UI/API/1.8/Resizable
From jQuery Wiki
< UI‎ | API
(Redirected from UI/Resizables/resizable)
Jump to: navigation, search 
Overview
Options
Events
Methods
Theming
jQuery UI Resizable
Overview
The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.

All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields:

ui.helper - a jQuery object containing the helper element
ui.originalPosition - {top, left} before resizing started
ui.originalSize - {width, height} before resizing started
ui.position - {top, left} current position
ui.size - {width, height} current size
Dependencies
UI Core
UI Widget
UI Mouse
Example
DemoView SourceA simple jQuery UI Resizable.

$("#resizable").resizable();


<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
    #resizable { width: 100px; height: 100px; background: silver; }
  </style>
  <script>
  $(document).ready(function() {
    $("#resizable").resizable();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="resizable"></div>

</body>
</html>

jquery有很多插件可以轻松实现漂亮的前端效果，要好好学习。

二：（我用的是这一段）

<html>

<head>
<title></title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<style> 
#testDiv{ 
 position:absolute;
 width:100%;
 height:200;
 overflow: hidden; 
 z-index: 2; 
 border: 1px outset ; 
}

#innerNice{
 height: 200; 
 overflow: auto; 
 width: 100%; 
 border: 1px inset ; 
}

</style>

<SCRIPT language=javascript>
/////////////////////////////////////////////////////////////////////////
// Generic Resize                                     //
//                                                                     //
// You may use this script as long as this disclaimer is remained.     //
               //
//                                                                     //
// How to use this script!                                             //
// Link the script in the HEAD and create a container (DIV, preferable //
// absolute positioned) and add the class="resizeMe" to it.            //
/////////////////////////////////////////////////////////////////////////

var leftObject = null; //This gets a value as soon as a resize start

function resizeObject() {
 this.el        = null; //pointer to the object
 this.dir    = "";      //type of current resize (n, s, e, w, ne, nw, se, sw)
 this.grabx = null;     //Some useful values
 this.graby = null;
 this.width = null;
 this.height = null;
 this.left = null;
 this.top = null;
}
 

//Find out what kind of resize! Return a string inlcluding the directions
function getDirection(el) {
 var xPos, yPos, offset, dir;
 dir = "";

 xPos = window.event.offsetX;
 yPos = window.event.offsetY;

 offset = 8; //The distance from the edge in pixels

 if (yPos<offset) dir += "n";
 else if (yPos > el.offsetHeight-offset) dir += "s";
 if (xPos<offset) dir += "w";
 else if (xPos > el.offsetWidth-offset) dir += "e";

 return dir;
}

function doDown() {
 var el = getReal(event.srcElement, "className", "resizeMe");
 var er = getReal(event.srcElement, "className", "resizeRight");

 if (el == null) {
  theobject = null;
  return;
 }  

 dir = getDirection(el);
 if (dir == "") return;

 leftObject = new resizeObject();
  
 leftObject.el = el;
 leftObject.dir = dir;

 leftObject.grabx = window.event.clientX;
 leftObject.graby = window.event.clientY;
 leftObject.width = el.offsetWidth;
 leftObject.height = el.offsetHeight;
 leftObject.left = el.offsetLeft;
 leftObject.top = el.offsetTop;

 window.event.returnValue = false;
 window.event.cancelBubble = true;
}

function doUp() {
 if (leftObject != null) {
  leftObject = null;
 }
}

function doMove() {
 var el, er, xPos, yPos, str, xMin, yMin;
 xMin = 200; //The smallest width possible
 yMin = 200; //             height

 el = getReal(event.srcElement, "className", "resizeMe");
 er = getReal(event.srcElement, "className", "resizeRight");

 if (el.className == "resizeMe") {
  str = getDirection(el);
 //Fix the cursor 
  if (str == "") str = "default";
  else str += "-resize";
  el.style.cursor = str;
 }
 
//Dragging starts here
 if(leftObject != null) {
  if (dir.indexOf("e") != -1)
   leftObject.el.style.width = Math.max(xMin, leftObject.width + window.event.clientX - leftObject.grabx) + "px";
 
  if (dir.indexOf("s") != -1)
   leftObject.el.style.height = Math.max(yMin, leftObject.height + window.event.clientY - leftObject.graby) + "px";

  if (dir.indexOf("w") != -1) {
   leftObject.el.style.left = Math.min(leftObject.left + window.event.clientX - leftObject.grabx, leftObject.left + leftObject.width - xMin) + "px";
   leftObject.el.style.width = Math.max(xMin, leftObject.width - window.event.clientX + leftObject.grabx) + "px";
  }
  if (dir.indexOf("n") != -1) {
   leftObject.el.style.top = Math.min(leftObject.top + window.event.clientY - leftObject.graby, leftObject.top + leftObject.height - yMin) + "px";
   leftObject.el.style.height = Math.max(yMin, leftObject.height - window.event.clientY + leftObject.graby) + "px";
  }
  
  window.event.returnValue = false;
  window.event.cancelBubble = true;
 } 
}


function getReal(el, type, value) {
 temp = el;
 while ((temp != null) && (temp.tagName != "BODY")) {
  if (eval("temp." + type) == value) {
   el = temp;
   return el;
  }
  temp = temp.parentElement;
 }
 return el;
}

document.onmousedown = doDown;
document.onmouseup   = doUp;
document.onmousemove = doMove;
</SCRIPT>

 

<meta content="Microsoft FrontPage 4.0" name="GENERATOR">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>

<body>

 <div class="resizeMe" id="testDiv" >
  <div id="innerNice" style="background-color:gray">
 border
   </div>
  </div>

</body>
</html>