如何拖动和调整DIV元素的大小

Question

I want to resize and drag DIV element in a HTML page. The code I used is as follows. 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>

The issue is that I can't drag it any where I can resize but can't reduce the DIV element size from the original size, I don't know why..?.

Answer 1

I see you are using the code from TwinHelix http://www.twinhelix.com/javascript/dragresize/

1) Please give credit to the author by always stating, clearly, where you got the code you are using. You should have told us that you are using the package available from TwinHelix. Don't, deliberately or by omission, let people think that code you show is your own. If you got it somewhere, tell us.

2) I've used that code to explore some possibilities and I had no problem with it. I could resize divs to any size, including to smaller than the original size.

I recommend you go to the TwinHelix site and get the current code and then start over and make sure you are using it correctly.

You can set limits on how large or small a div can be made, limits on how much it can be moved up and down, etc.

Make sure you understand at least the basics of what it is doing and how to code the divs to do what you want done.

Take TwinHelix's demo page, copy it to your system, with all the Javascript, etc. and get it to work on your system. Then make that page work the way you want - divisions sizes, content, etc. - and once you have divisions working the way you want, integrate the code into your own pages. Never take code from somewhere and jump right in and put it in your pages. Isolate things, make a separate test page with only the new thing, drag and resize in this example, and then integrate it into your pages.

Trying to change it to work the way you want at the same time you are integrating it into your pages will cause you more problems than you can handle.

When doing any programming, break it down into easily handled chunks, get them working the way you want, and then put them together to make the whole (I've been at "this" for 39+ years and have just a bit of experience).

Read the comments in the sample code and the other code and understand at least who to define the divisions.

Unless you are sure of what you are doing, don't modify any of the code or CSS or you may introduce problems with no idea of where they came from.

3) Except for a couple of issues, the TwinHelix code works well. My problem was in trying to stretch the capabilities and adding new ones. I got things working the way I want but there are a few quirks I simply don't like. So, I'm looking at some other methods of doing it. I don't know when I'll have it done, but when I do I'll post a page on my web site at http://www.bobnovell.com --- be aware that there is not much there right now (as of December 28, 2012) but I have a lot to add when I have time.

4) For a reasonably good drag function, take a look at http://tool-man.org/ToolManDHTML/ - the "Basic Dragable Layers" It does not have resizing but it works well. The only problem has to do with setting the zIndex. I've added code to handle mouseDowns to bring divisions

5) I would not expect anyone to look at all of the code - JavaScript, CSS, HTML - that you provided in this question and give you advice -- it is simply too large.

Also, go to the authors if you have questions.