?
Solved

Draggable div

Posted on 2014-02-23
3
Medium Priority
?
446 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…
Suggested Courses

807 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