• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4433
  • Last Modified:

Drag Resize Div

Hi Guys,
I have this script `Not mine` which is working fine. the problem is I need to modify the script to use an image to have the user drag the image to start resizing the div.

Let me explain that in code

<div id="container" style="background-color:Red; position:absolute; width:200px; height:400px">
   <div id="dragIcon" style="width:20px;height:20px; position:absolute;bottom: 0px; right: 0px; cursor: se-resize;margin: -1px"  >
   <img src="resize.png" alt="resize image" />
   </div>
<p>HHHHH</p>
    </div>

I need to user to be able to resize `container` div by draging the resize.png.
any idea how to accomplish this.

function arwDDEnable(e) {
        if (typeof (e) == "object") {
            if (e.nodeName == "DIV" && e.style.position == "absolute"){
               
                e.onmousedown = function(ev) {
                    if (!ev) {
                        ev = event;
                        this.setAttribute('_drag', 2);
                        this.style.cursor = 'se-resize';
                    }
                    this.setAttribute('_x', ev.screenX);
                    this.setAttribute('_y', ev.screenY);
                  //  if (ev.shiftKey) {
                    //    this.setAttribute('_drag', 1);
                     //   this.style.cursor = 'move';
                   // }
                  //  if (ev.altKey || ev.onMouseDown) {
                      //  this.setAttribute('_drag', 2);
                      //  this.style.cursor = 'se-resize';
                   // }
                    if (this.getAttribute("_drag") > 0) {
                        this.style.filter = 'alpha(opacity=50)';
                        this.style.opacity = 0.5;
                    }
 
                }
 
 
                e.onmouseup = function() {
                    this.style.cursor = '';
                    this.setAttribute('_drag', 0);
                    this.style.filter = 'alpha(opacity=100)';
                    this.style.opacity = 1;
                }
 
                e.onmousemove = function(ev) {
                    if (!ev) {
                        ev = event;
                       
                    }
                    var dX = ((ev.screenX - this.getAttribute('_x')));
                    var dY = ((ev.screenY - this.getAttribute('_y')));
                    if (this.getAttribute('_drag') > 0) {
                        if (document.selection) {
                            document.selection.empty();
                        }
                    }
                    switch (String(this.getAttribute('_drag'))) {
 
                       // case '1':
                      //      this.style.left = '' + (parseInt(this.style.left) + dX) + 'px';
                       //     this.style.top = '' + (parseInt(this.style.top) + dY) + 'px';
                      //      break;
 
                        case '2':
                            this.style.width = '' + (parseInt(this.style.width) + dX) + 'px';
                            this.style.height = '' + (parseInt(this.style.height) + dY) + 'px';
                            break;
 
                    }
                    this.setAttribute('_x', ev.screenX);
                    this.setAttribute('_y', ev.screenY);
                }
 
                e.onmouseout = function() {
                    if (this.getAttribute('_drag') != 0) {
                        this.onmouseup();
                    }
                }
            }
        }
    }

Open in new window

0
Sammy
Asked:
Sammy
  • 2
  • 2
1 Solution
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
in lines

                        case '2':
                            this.style.width = '' + (parseInt(this.style.width) + dX) + 'px';
                            this.style.height = '' + (parseInt(this.style.height) + dY) + 'px';
                            break;

change to:

                        case '2':
                            this.style.width = '' + (parseInt(this.style.width) + dX) + 'px';
                            this.style.height = '' + (parseInt(this.style.height) + dY) + 'px';
                            this.parentNode.parentNode.style.width=this.style.width;
                            this.parentNode.parentNode.style. height =this.style.height;
                            break;
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Sorry there was a space  after .style.  :P


                        case '2':
                            this.style.width = '' + (parseInt(this.style.width) + dX) + 'px';
                            this.style.height = '' + (parseInt(this.style.height) + dY) + 'px';
                            this.parentNode.parentNode.style.width=this.style.width;
                            this.parentNode.parentNode.style.height =this.style.height;
                            break;
0
 
SammyAuthor Commented:
Sorry for the delay Wilg32, I have completely forgotten about this issue.

0
 
SammyAuthor Commented:
Thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now