Solved

Draggable div

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Find out what you should include to make the best professional email signature for your organization.
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

914 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

19 Experts available now in Live!

Get 1:1 Help Now