Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Drag Resize Div

Posted on 2009-05-12
4
Medium Priority
?
4,411 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 Ageil
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 18

Expert Comment

by:Pawel Witkowski
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:
Pawel Witkowski earned 2000 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 Ageil
ID: 24404966
Sorry for the delay Wilg32, I have completely forgotten about this issue.

0
 
LVL 27

Author Closing Comment

by:Sammy Ageil
ID: 31618523
Thanks
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

670 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