Solved

Drag Resize Div

Posted on 2009-05-12
4
4,389 Views
Last Modified: 2013-11-19
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
Comment
Question by:Sammy
  • 2
  • 2
4 Comments
 
LVL 18

Expert Comment

by:wilq32
ID: 24372794
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
 
LVL 18

Accepted Solution

by:
wilq32 earned 500 total points
ID: 24372798
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
 
LVL 27

Author Comment

by:Sammy
ID: 24404966
Sorry for the delay Wilg32, I have completely forgotten about this issue.

0
 
LVL 27

Author Closing Comment

by:Sammy
ID: 31618523
Thanks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to count occurrences of each item in an array.

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now