Solved

Draggable div

Posted on 2014-02-23
3
442 Views
Last Modified: 2014-02-24
Hey Experts --

This java script function I wrote creates a new div that acts as a new window and what im trying to accomplish is when the user clicks on the title bar with the mouse button down he will be able to move the div container around anywhere on the screen. Im not sure if im triggering the move function correctly. if someone can go through my code and see what im doing wrong That would certinally make my day. Thanks for the help guys.

function show_new_window(title, width, height, window_id, callBack) {
         var offX;
         var offY;
         
	 if (document.getElementById(window_id)) {
            document.getElementById(window_id).style.display = "block";
            return;
        }
	
	var container = document.createElement("div"); 
            container.id = window_id;
            container.style.border = "1px solid black";
            container.style.position = "absolute";
            container.style.zIndex = "10";
            container.style.width = width;
            container.style.height = height;
            container.style.top = "150px";
            container.style.left = "400px";
            container.style.backgroundColor = "white";
            document.body.appendChild(container);
	
	var title_con = document.createElement("div");
            title_con.id = "titlebar";
            title_con.style.borderBottom = "1px solid black";
            title_con.style.position = "absolute";
            title_con.style.width = "100%";
            title_con.style.height = "25px";
            title_con.style.textIndent = "10px";
            title_con.style.background = "#1e5799";
            title_con.style.lineHeight = "25px";
            title_con.onmousedown = addListeners;           
            container.appendChild(title_con);
	
	var tit = document.createElement("div");
            tit.style.fontSize = "large";
            tit.style.width = "175px";
            tit.style.float = "left";
            tit.style.paddingLeft = "10px";
            tit.style.color = "#FFFFFF";
            tit.innerHTML = title;
            title_con.appendChild(tit);
	
	var exit = document.createElement("div");
            exit.id = "exit_button";
            exit.style.fontSize = "large";
            exit.style.float = "right";
            exit.style.paddingRight = "10px";
            exit.style.cursor = "pointer";
            title_con.appendChild(exit);

	var exit_button	= document.createElement("a");
            exit_button.setAttribute("id", "exit button");
            exit_button.style.color = "#ffffff";
            exit_button.innerHTML = "X";
            exit_button.onclick = function() {
                var elem = document.getElementById(window_id);
                    elem.parentNode.removeChild(elem);
		};
            exit.appendChild(exit_button);
	
	var inner_container = document.createElement("div");
            inner_container.setAttribute("id", "inner_container");
            inner_container.id = "inner_container";
            container.appendChild(inner_container);
            callBack;
            
        var addListeners = function() {
            document.getElementById(window_id).addEventListener('mousedown', mouseDown, false);
            window.addEventListener('mouseup', mouseUp, false);
        };
           
        var mouseUp = function() {
            window.removeEventListener('mousemove', divmove, true);
        };
               
        var mouseDown = function(e) {
            var div = document.getElementById(window_id);
            offY = e.clientY-parseInt(div.offsetTop);
            offX = e.clientX-parseInt(div.offsetLeft);
            window.addEventListener('mousemove', divmove, true);
        };
        var divmove = function(e) {
            var div = document.getElementById(window_id);
            div.style.position = 'absolute';
            div.style.top = (e.clientY-offY) + 'px';
            div.style.left = (e.clientX-offX) + 'px';
        };
}

Open in new window

0
Comment
Question by:Easyrider43
  • 2
3 Comments
 
LVL 14

Accepted Solution

by:
Pierre Cornelius earned 500 total points
ID: 39881768
A few comments:
nicely coded! neat and tidy, well done
addListeners is used before declaring it so it never gets called, move it up
what is callBack supposed to do? at the moment it does nothing. Looks like you want to call it after the window is created. if so add () after the call to it i.e. change "callBack" to callBack();"
your exit button placement needs fixing, I added:
exit.style.top = '0';
                        exit.style.position = 'absolute';                  
                        exit.style.left = (title_con.clientWidth - 30)+'px';

I tested your code (with above modifications) on my side (Firefox) and works very well :)
<!DOCTYPE html>
<html>
<head></head> 
<body>
	<button onclick="show_new_window('testing', '400px', '300px', 'window1', cb)">test</button>

    <script type="text/javascript">
	
	function cb()
	{
	  alert('cb called');
	}
	
function show_new_window(title, width, height, window_id, callBack) {
         var offX;
         var offY;
         
	 if (document.getElementById(window_id)) {
            document.getElementById(window_id).style.display = "block";
            return;
        }
	
	var addListeners = function() {
            document.getElementById(window_id).addEventListener('mousedown', mouseDown, false);
            window.addEventListener('mouseup', mouseUp, false);
        };
		
	var container = document.createElement("div"); 
            container.id = window_id;
            container.style.border = "1px solid black";
            container.style.position = "absolute";
            container.style.zIndex = "10";
            container.style.width = width;
            container.style.height = height;
            container.style.top = "150px";
            container.style.left = "400px";
            container.style.backgroundColor = "white";
            document.body.appendChild(container);
	
	var title_con = document.createElement("div");
            title_con.id = "titlebar";
            title_con.style.borderBottom = "1px solid black";
            title_con.style.position = "absolute";
            title_con.style.width = "100%";
            title_con.style.height = "25px";
            title_con.style.textIndent = "10px";
            title_con.style.background = "#1e5799";
            title_con.style.lineHeight = "25px";
            title_con.onmousedown = addListeners;           
            container.appendChild(title_con);
	
	var tit = document.createElement("div");
            tit.style.fontSize = "large";
            tit.style.width = "175px";
            tit.style.float = "left";
            tit.style.paddingLeft = "10px";
            tit.style.color = "#FFFFFF";
            tit.innerHTML = title;
            title_con.appendChild(tit);
	
	var exit = document.createElement("div");
            exit.id = "exit_button";
            exit.style.fontSize = "large";
            exit.style.float = "right";
            exit.style.paddingRight = "10px";
            exit.style.cursor = "pointer";
				exit.style.top = '0';
				exit.style.position = 'absolute';			
				exit.style.left = (title_con.clientWidth - 30)+'px';
            title_con.appendChild(exit);

	var exit_button	= document.createElement("a");
            exit_button.setAttribute("id", "exit button");
            exit_button.style.color = "#ffffff";
            exit_button.innerHTML = "X";
            exit_button.onclick = function() {
                var elem = document.getElementById(window_id);
                    elem.parentNode.removeChild(elem);
		};
            exit.appendChild(exit_button);
	
	var inner_container = document.createElement("div");
            inner_container.setAttribute("id", "inner_container");
            inner_container.id = "inner_container";
            container.appendChild(inner_container);
            callBack();
            
                   
        var mouseUp = function() {
            window.removeEventListener('mousemove', divmove, true);
        };
               
        var mouseDown = function(e) {
            var div = document.getElementById(window_id);
            offY = e.clientY-parseInt(div.offsetTop);
            offX = e.clientX-parseInt(div.offsetLeft);
            window.addEventListener('mousemove', divmove, true);
        };
        var divmove = function(e) {
            var div = document.getElementById(window_id);
            div.style.position = 'absolute';
            div.style.top = (e.clientY-offY) + 'px';
            div.style.left = (e.clientX-offX) + 'px';
        };
}
                                  	
	</script>

</body>
</html>
                                  

Open in new window

0
 
LVL 1

Author Closing Comment

by:Easyrider43
ID: 39881824
You know its kind comments like that- that makes me feel good about coding. I appreciate your help and the kind words. Thank you.

Chris S
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39881835
Glad to help. Good luck!
0

Featured Post

Technology Partners: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Tag Manager - Add Trigger Using Div class 22 52
White space in figure / img 4 18
Aspx calendar pop up control 3 25
Building JSON/JQuery Results Display 11 20
This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

685 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