Drag and Drop - New Twist

treyball3 · Nov 23, 2004

I've been searching through the forums and I haven't been able to find any code for what I'm wanting to do. I'm not well versed in javascript, so that's why I'm here. What I want to do is this...

I have a bunch of links organized in different "folders" on my page. When I view this page, I see the links grouped below their appropriate folder name. I want to be able to drag a link from one group, drop it onto an image for another group, and then do some db work to tell it to move to this other folder. I envision it visually looking like a windows desktop when you drag a shortcut to the recycling bin. My basic steps are that I need to know what link I'm grabbing, what folder I'm putting it in to, update the database, and then reload the page.

Can anyone give me something to at least to start with on this??

Thanks - Todd

chessbot · Nov 23, 2004

How about this? (I tested it in FireFox only.)
updateFile.php is a file that reads the file name and new folder from the querystring and updates accordingly. If you change it, change the target in the onLoad tag of the body of changing.html.

dragndrop.html

Code:

<html>
<head>
<title>Drag 'n' Drop</title>
<style type="text/css">
<!--

.folder {
	border: 1px solid black;
	background-color: yellow;
	height: 100px;
	width: 100px;
	position: relative;
	float: left;
	margin-right: 100px;
	}

.file {
	height: 30px;
	width: 50px;
	border: 1px solid black;
	background-color: red;
	cursor: pointer;
	position: relative;
	left: 0px;
	top: 0px;
	z-index: 1;
	}

#all {
	position: absolute;
	left: 10px;
	top: 10px;
	}

br {
	clear: both;
	}

-->
</style>
<script type="text/javascript">
<!--

var active = null;
var next = null;
var lastFolder = null;

var IE = !(!document.all);
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = saveMouseXY;

var last_x, last_y;

function saveMouseXY(e)
{
  if (IE) 
  {
    mouse_x = event.clientX + document.body.scrollLeft;
    mouse_y = event.clientY + document.body.scrollTop;
  }
  else
  {
    mouse_x = e.pageX-25;
    mouse_y = e.pageY-25;
  }
  if (active != null)
  {
    active.style.position = "absolute";
    active.style.left = mouse_x;
    active.style.top = mouse_y;
  }
}

function doMouseDown(elem)
{
  lastFolder = document.getElementById(elem.parentNode.id);
  next = (elem.nextSibling == null) ? null : document.getElementById(elem.nextSibling.id);
  active = elem;
  active.parentNode.removeChild(active)
  document.getElementById('all').appendChild(active);
}

function doMouseUp(elem)
{
  active = null;
  var folders = getFolderElements(document.getElementById("all"));
  for (var i=0; i<folders.length; i++)
  {
    if (folders[i] == lastFolder) continue;
    var dims = getElementPosition(folders[i]);
    var left = parseInt(elem.style.left), top = parseInt(elem.style.top);
    if (left >= dims.left && left <= dims.left+100 && top >= dims.top && top <= dims.top+100)
    {
      elem.style.position = "relative";
      elem.style.left = "0px";
      elem.style.top = "0px";
      elem.parentNode.removeChild(elem);
      folders[i].appendChild(elem);
      setFrame(elem.id, folders[i].id);
      return;
    }
  }
  elem.parentNode.removeChild(elem);
  elem.style.position = "relative";
  elem.style.left = "0px";
  elem.style.top = "0px";
  if (next != null)
    lastFolder.insertBefore(elem, next);
  else
    lastFolder.appendChild(elem);
}

function setFrame(file, folder)
{
  var ifr = document.getElementById('editframe');
  ifr.src = "changing.html?file=" + file + "&folder=" + folder;
}

function getFolderElements(elem)
{
  var children = elem.childNodes;
  var all = new Array();
  for (var i=0; i<children.length; i++)
  {
    if (!children[i].id) continue;
    if (children[i].id.indexOf("folder") > -1) 
      all.push(children[i]);
    if (children[i].childNodes.length > 0)
      all.concat(getFolderElements(children[i]));
  }
  return all;
}
    

function getElementPosition(elem) {
    var offsetTrail = elem;
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != -1 && 
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return {left:offsetLeft, top:offsetTop};
}

// -->
</script>
</head>
<body>
<div id="all">
<div class="folder" id="folder1">Folder 1
 <div class="file" id="file1" onmousedown="doMouseDown(this);" onmouseup="doMouseUp(this);">File 1
</div><div class="file" id="file2" onmousedown="doMouseDown(this);" onmouseup="doMouseUp(this);">File 2
</div><div class="file" id="file3" onmousedown="doMouseDown(this);" onmouseup="doMouseUp(this);">File 3</div>
</div>
<div class="folder" id="folder2">Folder 2
</div>
<br><br><br>
<iframe id="editframe" src="done.html">Your browser does not support iframes!</iframe>
</div>
</body>
</html>

done.html

Code:

<html>
<body>
<h3>Done</h3>
</body>
</html>

changing.html

Code:

<html>
<head>
<script type="text/javascript">
<!--

var values = new Array("Changing","Changing.","Changing..","Changing...","Changing...");
var time = null;
var pos = 0;

function doEllipsis()
{
  if (pos >= values.length)
    pos = 0;
  document.getElementById("text").innerHTML = values[pos];
  pos++;
  time = setTimeout("doEllipsis();",400);
}

function getValue(varname)
{
  var url = window.location.href;
  var qparts = url.split("?");
  if (qparts.length == 0)
  {
    return "";
  }
  var query = qparts[1];
  var vars = query.split("&");
  var value = "";
  for (i=0;i<vars.length;i++)
  {
    var parts = vars[i].split("=");
    if (parts[0] == varname)
    {
      value = parts[1];
      break;
    }
  }
  value = unescape(value);
  value.replace(/\+/g," ");
  return value;
}

function updateFile(url)
{
  var ifr = document.getElementById('update');
  ifr.src = url + "?file=" + getValue("file") + "&folder=" + getValue("folder");
}
// -->
</script>
</head>
<body onload="setURL('updateFile.php');doEllipsis();">
<h3 id="text">Loading</h3><br>
<iframe id="update" tyle="display: none;" onload="location.replace('done.html');" src="about:blank">
</iframe>
</body>
</html>

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation

BillyRayPreachersSon · Nov 23, 2004

Check out my example in the "Drag & Drop" section of the FAQs:

faq216-5190

It's IE only, but you may find it some use - who knows!

Dan

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!

Drag and Drop - New Twist

treyball3

Programmer

chessbot

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor