title: how to drag and resize DIV element
body: <p>I want to resize and drag DIV element in a HTML page. The code I used is as follows.
  <strong>Javascript:</strong></p>
  
  <pre><code> &lt;script type="text/javascript" src="dragresize.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript"&gt; 
  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 &amp;&amp; elm.className.indexOf('drsElement') &gt; -1) return true;
  };
  dragresize.isHandle = function(elm)
  {
   if (elm.className &amp;&amp; elm.className.indexOf('drsMoveHandle') &gt; -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);
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .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;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;div class="drsElement drsMoveHandle" id="output1" style="font-weight:bold;height:20px;margin-top:40px"&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;div class="drsElement drsMoveHandle" id="output2" style="height:40px;margin-top:30px"&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;/tr&gt;   
              &lt;tr&gt;
                  &lt;td&gt;&lt;div class="drsElement drsMoveHandle" id="output3" style="height:50px;margin-top:40px;"&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;/tr&gt;   
          &lt;/table&gt;
  </code></pre>
  
  <p>The issue is that I can't <strong>drag</strong> it any where I can resize but can't reduce the DIV element size from the original size, I don't know why..?. </p>