Member Avatar for matthewl

For the last three days I have been working on developing a view panel that will display the users site stats and there sites info on one of my site. I plan to use a absolute div with a title bar that is the handle for the drag and drop control. My problem is that when I click the title bar it does not drag the div right like the div. I have tried at least 12 ways to drag and drop and all of them failed to keep the position of the mouse when I moved the mouse. My curreent version of the drag and drop is really messed up. I was wondering if someone can help me fix my code so when I click the title bar of the div it will drag normally with the mouse?

here is my current drag and drop javascript code:

var x;
var y;
var drag = false;
elm = document.getElementById('view_title');
elm.onmousedown = function(e) {
    e = e || event;
     target = document.getElementById('view');
     x = e.clientX;
     y = e.clientY;
     ox = elm.style.left;
     oy = elm.style.top;
     drag = true;
    document.documentElement.onmousemove = function(e) {
      e = e || event;
      
      if(drag == true) {
      target.style.left = (ox-e.clientX-x)+'px';
      target.style.top = (oy-e.clientY-y)+'px';
      }
    }
    document.documentElement.onmouseup = function(e) {
      e = e || event;
      drag = false;
    }
}

here is my div code:

<div id="view"><div id="view_title">Loading</div><div id="view_content">Please wait....</div></div>

And finally my current CSS:

#view {
    width: 400px;
    height: 350px;
    visibility: hidden;
    z-index: 99;
    top:100px;
    left:100px;
    background-image: url(../images/view.gif);
    font-style: oblique;
    position: absolute;
}
view_title {}

Thanks for your help.

  • 2 Contributors
  • 3 Replies
  • 117 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

Hi matthewl,

try this over at line#4:

var x;
var y;
var drag = false;
// Fixing line#4 >>>
var elm = ( function() {
   return document.getElementById("view_title");
} );


// more stuff >>>

-essential

Member Avatar for matthewl

Hello essential. I tried it and that has just made elm return a function and it was not returning the page element reference that should trigger the drag and drop events.

Thanks I am still trying things that may work.

What I mostly need help with is calculating the div position of the view div when I click and drag the view_title

like on line 17 and 18 of the JS code.

Oh and have a wonderful day.

Member Avatar for essential

Hi,

i've provided you a simple demo, that you can easily expand and use.

The coords.y( elementId ) and coords.x( elementId ) will provide you the exact position of the target element of your choice.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com</title>
<style id="css21" type="text/css" media="all">
/* <![CDATA[ */

html, body {
   border : none;
   color : #405060;
   font : normal normal normal 90%/1.4 Verdana, Helvetica, Arial, sans-serif;
   height : auto;
   margin : 0;
   min-height : 206px;
   min-width : 176px;
   padding : 0;
   text-align : center;
   width : auto; }

body { background-color : #FFFFFF; }
h2.logo {
   border-top : 1px solid #000;
   border-bottom : 1px solid #000;
   letter-spacing : 2px;
   padding : .200em 1em .200em 1em;
   margin-bottom : 1.500em;
   background-color : #405060;
   color : #fff; }

div { 
   border : none;
   margin : 0;
   padding : 0; }

div#view {
   width : 400px;
   height : 350px;
/*   visibility : hidden; */
   z-index : 99;
   top : 100px;
   left : 100px;
   background-color : #F0FFFF;
   background-image : url(../images/view.gif);
   font-style : oblique;
   position : absolute; }
view_title { }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var drag = 0;
var elm = ( function( ids ) {
   var ids = ids || 0;
   if ( ids )
      if( typeof( ids ) === "object" )
         return ids;
       else
         return (( ids = document.getElementById( ids )) ? ids : ids = document.all[ ids ] );
    else
      return ids;
   } );
coords = {
getCoords : ( function( pos, obj ) {
var pos = pos;
var mode = {
   offsetTop : "y",
   offsetLeft : "x" }[ pos ];
var pointer = 0;
var obj = elm( obj ) || 0;
var offset = (( offset = obj.offsetParent ) ? offset : "break" );
   if( offset ) {
      do {
         pointer += obj[ pos ];
      } while((( typeof( offset ) !== "string" ) ? obj = obj.offsetParent : eval( offset )));
   } else if( mode in obj ) {
      pointer += obj[ mode ];
   } return pointer;
} ),
x : ( function( eid ) {
   return this.getCoords( "offsetLeft", eid );
   } ),
y : ( function( eid ) {
   return this.getCoords( "offsetTop", eid );
   } )
};
onload = ( function( element ) {
var element = element;
   return function() { 
   elm( element ).onmousedown = ( function( e ) {
   var e = (( e ) ? e : event );
   var t = (( e.target ) ? e.target : e.srcElement ); 
   /* if( t.id && t.id === "view" ) { 

   exceptions': >>>
  */
      var ex = coords.x( t.id );
      var ey = coords.y( t.id );
      var ox = coords.x( element );
      var oy = coords.y( element );
   if( "documentElement" in document ) {
      document.documentElement.onmousemove = ( function( e ) { 
         if( drag ) {
            t.style.left = ((( ox ) - ex ) + "px" );
            t.style.top = ((( oy ) - ey ) + "px" );
            this.onmouseup = ( function( e ) { drag = 0; } );
         }
      } ); // Exit Function
    }
 // }
} );
   }
} )("view_title");
// ]]>
</script>
</head>
<body id="xhtml-10-transitional">
<div id="view">

<div id="view_title">Loading</div> <!-- id :: view_title -->
<div id="view_content">Please wait...</div> <!-- id :: view_content -->

</div> <!-- id :: view -->
</body>
</html>

hope it helps...
-essential

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.