Solved

Draggable div

Posted on 2014-02-23
3
441 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

856 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