我想在 HTML 页面中调整和拖动 DIV 元素。我使用的代码如下。 Javascript：
<script type="text/javascript" src="dragresize.js"></script>
<script language="javascript" type="text/javascript">
var dragresize = new DragResize('dragresize',
{ minWidth: 50, minHeight: 50, minLeft: 20, minTop: 20, maxLeft: 600, maxTop: 600 });
// Optional settings/properties of the DragResize object are:
// enabled: Toggle whether the object is active.
// handles[]: An array of drag handles to use (see the .JS file).
// minWidth, minHeight: Minimum size to which elements are resized (in pixels).
// minLeft, maxLeft, minTop, maxTop: Bounding box (in pixels).
// Next, you must define two functions, isElement and isHandle. These are passed
// a given DOM element, and must "return true" if the element in question is a
// draggable element or draggable handle. Here, I'm checking for the CSS classname
// of the elements, but you have have any combination of conditions you like:
dragresize.isElement = function(elm)
{
if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
};
dragresize.isHandle = function(elm)
{
if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
};
// You can define optional functions that are called as elements are dragged/resized.
// Some are passed true if the source event was a resize, or false if it's a drag.
// The focus/blur events are called as handles are added/removed from an object,
// and the others are called as users drag, move and release the object's handles.
// You might use these to examine the properties of the DragResize object to sync
// other page elements, etc.
dragresize.ondragfocus = function() { };
dragresize.ondragstart = function(isResize) { };
dragresize.ondragmove = function(isResize) { };
dragresize.ondragend = function(isResize) { };
dragresize.ondragblur = function() { };
// Finally, you must apply() your DragResize object to a DOM node; all children of this
// node will then be made draggable. Here, I'm applying to the entire document.
dragresize.apply(document);
</script>
CSS
<style type="text/css">
.drsElement {
position: relative;
border: 1px solid #333;
}
.drsMoveHandle {
height: 10px;
border-bottom: 1px solid #666;
cursor: move;
}
.dragresize {
position: absolute;
width: 5px;
height: 5px;
font-size: 1px;
background: #EEE;
border: 1px solid #333;
}
.dragresize-tl {
top: -8px;
left: -8px;
cursor: nw-resize;
}
.dragresize-tm {
top: -8px;
left: 50%;
margin-left: -4px;
cursor: n-resize;
}
.dragresize-tr {
top: -8px;
right: -8px;
cursor: ne-resize;
}
.dragresize-ml {
top: 50%;
margin-top: -4px;
left: -8px;
cursor: w-resize;
}
.dragresize-mr {
top: 50%;
margin-top: -4px;
right: -8px;
cursor: e-resize;
}
.dragresize-bl {
bottom: -8px;
left: -8px;
cursor: sw-resize;
}
.dragresize-bm {
bottom: -8px;
left: 50%;
margin-left: -4px;
cursor: s-resize;
}
.dragresize-br {
bottom: -8px;
right: -8px;
cursor: se-resize;
}
</style>
HTML
<table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;">
<tr>
<td><div class="drsElement drsMoveHandle" id="output1" style="font-weight:bold;height:20px;margin-top:40px"></div></td>
</tr>
<tr>
<td><div class="drsElement drsMoveHandle" id="output2" style="height:40px;margin-top:30px"></div></td>
</tr>
<tr>
<td><div class="drsElement drsMoveHandle" id="output3" style="height:50px;margin-top:40px;"></div></td>
</tr>
</table>
问题是我不能将它拖到可以调整大小的任何地方，但不能从原始大小减小 DIV 元素大小，我不知道为什么......？