Passing variables between functions

emozley · Feb 1, 2010

Hi,

I have found a rather neat bit of javascript for dragging and dropping divs. What I would like to do is adapt it slightly so once the div has been dropped an AJAX request is made that saves the x and y values for the div.

Here's what I've got so far:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/strict.dtd">[/URL]
<!--************************************************************************-->
<!--* Generic Drag Demo                                                    *-->
<!--*                                                                      *-->
<!--* Copyright 2001 by Mike Hall                                          *-->
<!--* Please see [URL unfurl="true"]http://www.brainjar.com[/URL] for terms of use.                 *-->
<!--************************************************************************-->
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<title>BWBNet - Asset Manager</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css"> 
 
.box {
  background-color: #ffff00;
  border: 1px solid #000000;
  color: #000000;
  padding: 0px;
  position: absolute;
}
 
.bar {
  background-color: #008080;
  color: #ffffff;
  cursor: move;
  font-weight: bold;
  padding:3px;
}
 
.content {
padding:3px;
}
 
</style>
<script type="text/javascript">//<![CDATA[
 
//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// See [URL unfurl="true"]http://www.brainjar.com[/URL] for terms of use.
//*****************************************************************************
 
// Determine browser and version.
 
function Browser() {
 
  var ua, s, i;
 
  this.isIE    = false;
  this.isNS    = false;
  this.version = null;
 
  ua = navigator.userAgent;
 
  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }
 
  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }
 
  // Treat any other "Gecko" browser as NS 6.1.
 
  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}
 
var browser = new Browser();
 
// Global object to hold drag information.
 
var dragObj = new Object();
dragObj.zIndex = 0;
 
function dragStart(event, id) {
 
  var el;
  var x, y;
 
  // If an element id was given, find it. Otherwise use the element being
  // clicked on.
 
  if (id)
    dragObj.elNode = document.getElementById(id);
  else {
    if (browser.isIE)
      dragObj.elNode = window.event.srcElement;
    if (browser.isNS)
      dragObj.elNode = event.target;
 
    // If this is a text node, use its parent element.
 
    if (dragObj.elNode.nodeType == 3)
      dragObj.elNode = dragObj.elNode.parentNode;
  }
 
  // Get cursor position with respect to the page.
 
  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
 
  // Save starting positions of cursor and element.
 
  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);
 
  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
 
  // Update element's z-index.
 
  dragObj.elNode.style.zIndex = ++dragObj.zIndex;
 
  // Capture mousemove and mouseup events on the page.
 
  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}
 
function dragGo(event) {
 
  var x, y;
 
  // Get cursor position with respect to the page.
 
  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
 
  // Move drag element by the same amount the cursor has moved.
 
  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";
 
  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}
 
function dragStop(event) {
 
  // Stop capturing mousemove and mouseup events.
 
  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
  
}
 
//]]></script>
</head>
<body>
 
<!-- Normal page content. -->
  
<div id="PC210" class="box" style="left:400px;top:150px;">
  <div class="bar" style="width:100px;"
       onmousedown="dragStart(event, 'PC210')"><font face="verdana" size="1">PC210 - 755</font>
  </div>
  <div class="content" style="width:100px;">
    <font face="verdana" size="1">
    Ed Mozley (883)
    <br>
    755
    </font>
    <br>
    <img src="my-pc.png" width="30">
  </div>
</div>
 
</body>
</html>

I am still a beginner at javascript but I think the critical line is

Code:

document.attachEvent("onmouseup",   dragStop);

I think I need this bit to tell the dragStop function what the id is as well as the x and y values.

Then I think in the dragStop function I need to add something like:

Code:

var xmlhttp

function savePos(search)

{
if (search.length==0)
  {
  document.getElementById("CSRDiv").innerHTML="";
  return;
  }
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support XMLHTTP!");
  return;
  }
document.getElementById("mypopup").style.visibility='hidden';
document.getElementById("CSRDiv").innerHTML="<center><font face='verdana' size='2'><br><br>searching for '" + search + "'<br><br><img src='hound.jpg' width='150'><br><br>P L E A S E   W A I T...</center>";
var url="searchresults.asp";
url=url+"?search="+search;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function savePos(id, x, y)
{

if (id.length==0)
  {
  return;
  }
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support XMLHTTP!");
  return;
  }
var url="savepos.asp";
url=url+"?id="+id+"&x="+x+"&y="+y;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  
  }
}

function stateChangedB()
{
if (xmlhttp.readyState==4)
  {
  
  }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

So as you can see I've got most of the code but am having trouble bringing it all together!

Thanks very much

Ed

jmeckley · Feb 1, 2010

why not look in to a js library with plug-ins. most of this is already built-in. I really enjoy working with jQuery.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

emozley · Feb 2, 2010

Hi thanks for this - jquery looks as if it can do some pretty clever stuff but I fear that I will run into the same problem - i.e. passing the value of a function to my ajax request.

jmeckley · Feb 2, 2010

with the jquery UI you can hook into the stop (drop) event of the draggable widget and make an ajax call with any data you want. the code would look something like this

Code:

$('.selector').draggable({
   stop: function(event, ui) {
       var value = getValueFromSomeWhere();
       $.post("page.ext", {'key':value }, function(){
          //this will execute if the ajax request is successful.
       });
   }
});

for more information on the jquery ui see the documentation in the demos (link above). for more information on the jquery ajax check out documentation.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Passing variables between functions

emozley

Technical User

jmeckley

Programmer

emozley

Technical User

jmeckley

Programmer

Similar threads

Part and Inventory Search

Sponsor