SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drag and Drop Bugs!

    Hello everyone I need your help yet again! I have been working on a drag and drop script seem to be working pretty good except for a few bugs! Firstly if you grab the objects and try to move it for some reason the mouse slips of the element from time to time even though the button has not been clicked! This could just be my mouse but however I highly doubt this because it happens with no other drag and drop script! Secondly I am unable to use it with multiple objects or elements and I cant think of how I would go about doing this I think it has to do with the zindex of the elements I am not sure kind of puzzlled? For some reason I can only drag the first element! Thank again!

    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function dragThis(obj){
    	var clked = false, x_pos, y_pos, ele=document.getElementById(obj);
    		ele.onclick=function()
    		{
    		     clked = ( clked ) ? false : true;
    		     x_pos = event.clientX - event.srcElement.style.pixelLeft;
    		     y_pos = event.clientY - event.srcElement.style.pixelTop;
    		}
    		ele.onmousemove=function()
    		{
    		      if( clked )
    	 	      {
    		            event.srcElement.style.pixelLeft = event.clientX - x_pos;
    		            event.srcElement.style.pixelTop = event.clientY - y_pos;
    		      }
    		 }
    }
    window.onload=function(){
    	new dragThis("dragger1");	
    	new dragThis("dragger2");
    	}
    -->
    </script>
    </head>
    <body>
    <div style="background-color:black; color:white; width:150px; height:100px; position:absolute; 
    top:0; left:0; cursor:hand;" id="dragger1">
    Click me to drag <br>
    Click Again To Stop
    </div>
    
    <div style="background-color:black; color:white; width:150px; height:100px; position:absolute; 
    top:200; left:200; cursor:hand;" id="dragger2">
    Click me to drag <br>
    Click Again To Stop
    </div>
    
    </body>
    </html>

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Poop_Shoot,

    Here's a few ideas...

    1) In the click listener, get the current mouse position:
    Code:
     x_pos = event.clientX;
     y_pos = event.clientY;
    2) In the mousemove listener, move the ele by the 'change in mouse movement' (dx,dy):
    Code:
     event.srcElement.style.pixelLeft += event.clientX - x_pos;
     event.srcElement.style.pixelTop += event.clientY - y_pos;
    3) The mousemove listener should be on the document - not on the element to be dragged. You want your dragged element to get mousemove events even if the mouse slips off the element.

    4) The mousemove listener can't assume that event.srcElement is the element to be dragged. Perhaps in dragThis you do this:
    Code:
     ele.isDraggable = true;
    ...so in the mousemove listener you can do something like this:
    Code:
      var e = event.srcElement;
      while(e && !e.isDraggable) {
        e = e.offsetParent;
      }
      if (e) {
        e.style.pixelLeft += event.clientX - x_pos;
        e.style.pixelTop += event.clientY - y_pos;
      }

    It's lookin good, keep up the good work

  3. #3
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great Ideas Mike I had given up on this version and totally rewrote it but I will revive this one with the suggestions you gave thanks for the kind words to!!

    Another Version!

    Code:
    <html>
    <head>
    <script type="text/javascript">
    //Drag and Drop Script V4.0
    //Written By: Jon Palumbo
    var obj,xPos,yPos,grab;
    function zInd()
    {
    	var tg=document.getElementsByTagName( '*' );
    		for( var i=0;i<tg.length;i++ )
    		{
    			tg[ i ].style.zIndex=1;
    		}
    }
    
    function Grabed()
    {
    	if( event.button!=2 )
    	{
    		if(event.srcElement.className=="dragable")
    		{
    			obj=event.srcElement.style;
    			grab=( grab )?false:true;
    			xPos = event.offsetX;
    			yPos = event.offsetY;
    			zInd();
    		}
    	}
    	document.onmousemove=Moved;
    }
    function Moved()
    {
    	if( grab )
    	{
    		obj.zIndex=100 ;
    		obj.pixelLeft=( event.clientX-xPos )+document.body.scrollLeft;
    		obj.pixelTop=( event.clientY-yPos )+document.body.scrollTop;
    	}
    }
    	document.onclick=Grabed;
    </script>
    
    
    </head>
    <body>
    
    <img src="cartman.gif" style="position:absolute;
    top:20; left:200; cursor:hand;" id="dragger1" class="dragable">
    
    <img src="timmy1.gif" style="position:absolute;
    top:20; left:400; cursor:hand;" id="dragger2" class="dragable">
    
    <img src="jimmy1.gif" style="position:absolute;
    top:300; left:450; cursor:hand;" id="dragger3" class="dragable">
    
    <font style="position:absolute;
    top:400; left:300; cursor:hand;" id="text" class="dragable">hello</font>
    
    <p style="position:absolute;
    top:200; left:600; width:150; cursor:hand;" id="par" class="dragable">
    This is a paragraph! 
    This is a paragraph! 
    This is a paragraph! 
    This is a paragraph! 
    This is a paragraph! 
    This is a paragraph! 
    This is a paragraph! 
    This is a paragraph!  
    </p>
    
    </body>
    </html>
    Last edited by Poop_Shoot; Oct 16, 2003 at 11:43.

  4. #4
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No luck its I tried to make the change but did not work!

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the late reply,

    Here's a little drag demo using the X library:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>X Drag Demo</title>
    <style type='text/css'>
    html { margin:0; padding:0; }
    body {
      color:#000; background:#fff; margin:0; padding:10px;
      font-family:verdana,arial,sans-serif; font-size:12px;
    }
    a {
      color:#008; background:transparent; text-decoration:underline;
    }
    #d2Container {
      position:absolute; margin:0; padding:0; font-size:10px;
      width:200px; height:auto; color:#000; background:#963; overflow:hidden;
    }
    #d2Contents {
      padding:10px;
    }
    .draggable {
      position:absolute; margin:0; padding:10px; font-size:10px;
      width:100px; height:auto; color:#000; background:#369; overflow:hidden;
    }
    </style>
    <script type='text/javascript' src='../x.js'></script>
    <script type='text/javascript'>
    window.onload = function()
    {
      var ele = xGetElementById('d1');
      xMoveTo(ele, (xClientWidth() - xWidth(ele)) / 2, (xClientHeight() - xHeight(ele)) / 2);
      xEnableDrag(ele, myOnDragStart, myOnDrag, myOnDragEnd);
    
      var ele = xGetElementById('d2Container');
      xMoveTo(ele, xClientWidth() - xWidth(ele) - 10, (xClientHeight() - xHeight(ele)) / 2);
      xResizeTo('d2', 20, 20);
      xMoveTo('d2', xWidth('d2Container') - xWidth('d2'), 0);
      xEnableDrag('d2', myOnDragStart, myOnDrag, myOnDragEnd);
    }
    function myOnDragStart(ele, mx, my)
    {
      ele.myTotalMX = 0;
      ele.myTotalMY = 0;
    }
    function myOnDrag(ele, mdx, mdy)
    {
      if (ele.id == 'd2') {
        xMoveTo('d2Container', xLeft('d2Container') + mdx, xTop('d2Container') + mdy);
      }
      else {
        xMoveTo(ele, xLeft(ele) + mdx, xTop(ele) + mdy);
      }  
      ele.myTotalMX += mdx;
      ele.myTotalMY += mdy;
    }
    function myOnDragEnd(ele, mx, my)
    {
      alert(ele.id + '\n\nThanks for the drag!\n\nTotal X movement: ' + ele.myTotalMX +
        '\n\nTotal Y movement: ' + ele.myTotalMY);
    }
    
    /* X Drag System
       These should be in a separate file - perhaps 'x_drag.js'  ;-)
    */
    
    var xDragMgr = {ele:null, mm:false};
    
    function xEnableDrag(id, fnDragStart, fnDrag, fnDragEnd)
    {
      var ele = xGetElementById(id);
      ele.xDraggable = true;
      ele.xOnDragStart = fnDragStart;
      ele.xOnDrag = fnDrag;
      ele.xOnDragEnd = fnDragEnd;
      xAddEventListener(ele, 'mousedown', xdOnMousedown, false);
      if (!xDragMgr.mm) {
        xDragMgr.mm = true;
        xAddEventListener(document, 'mousemove', xdOnMousemove, false);
      }
    }
    function xdOnMousedown(e) // drag start
    {
      var evt = new xEvent(e);
      var ele = evt.target;
      while(ele && !ele.xDraggable) {
        ele = xParent(ele);
      }
      if (ele) {
        ele.xDragX = evt.pageX;
        ele.xDragY = evt.pageY;
        xDragMgr.ele = ele;
        xAddEventListener(ele, 'mouseup', xdOnMouseup, false);
        if (ele.xOnDragStart) {
          ele.xOnDragStart(ele, evt.pageX, evt.pageY);
        }
      }
    }
    function xdOnMousemove(e) // drag
    {
      var evt = new xEvent(e);
      if (xDragMgr.ele) {
        var ele = xDragMgr.ele;
        var dx = evt.pageX - ele.xDragX;
        var dy = evt.pageY - ele.xDragY;
        ele.xDragX = evt.pageX;
        ele.xDragY = evt.pageY;
        if (ele.xOnDrag) {
          ele.xOnDrag(ele, dx, dy);
        }
        else {
          xMoveTo(ele, xLeft(ele) + dx, xTop(ele) + dy);
        }
      }  
    }
    function xdOnMouseup(e) // drag end
    {
      if (xDragMgr.ele) {
        xRemoveEventListener(xDragMgr.ele, 'mouseup', xdOnMouseup, false);
        if (xDragMgr.ele.xOnDragEnd) {
          var evt = new xEvent(e);
          xDragMgr.ele.xOnDragEnd(xDragMgr.ele, evt.pageX, evt.pageY);
        }
        xDragMgr.ele = null;
      }  
    }
    </script>
    </head>
    <body>
    <h1>X Drag Demo</h1>
    <p>Drag events implemented with the <a href='http://cross-browser.com/'>X Library</a>.</p>
    <p>I threw this together quickly... so it's probably not perfect -
    but it should give you some ideas. In particular,
    I did not tackle the problem of 'text selection'.</p>
    
    <div id='d1' class='draggable'>
      <p><strong>I am 'd1'</strong></p>
      <p>You can drag me anywhere on this element or one of its child elements.</p>
    </div>
    
    <div id='d2Container'>
      <div id='d2' class='draggable'></div>
      <div id='d2Contents'>
        <p><strong>I am 'd2Container'</strong></p>
        <p>You can only drag me by dragging 'd2',
        which is the blue element in the upper right corner.</p>
      </div>  
    </div>
    
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •