Solved

Draggable div

Posted on 2014-02-23
3
437 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
Comment Utility
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
Comment Utility
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
Comment Utility
Glad to help. Good luck!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 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

15 Experts available now in Live!

Get 1:1 Help Now