Solved

Drag Resize Div

Posted on 2009-05-12
4
4,387 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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

744 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

14 Experts available now in Live!

Get 1:1 Help Now