drag and drop

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
stow
Forum Newbie
Posts: 13
Joined: Tue Jul 27, 2010 1:31 pm

drag and drop

Post by stow »

Hi all,

I'm looking for a way to drag and drop items so that they can be reordered and then saved when the page is exited. I've tried a few guide on the net but nothing helped. If anyone could point me in the right direction I would appreciate it.

Thank you,

stow
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: drag and drop

Post by PHPHorizons »

Hello stow,

That is definitely possible. What have you got so far? If you can put up a page of what you have then I can help you figure this out. If you cannot do that, and you can only post code, then the code should be self contained (i.e., I can copy it and paste it to my web server and it will work).

Cheers
stow
Forum Newbie
Posts: 13
Joined: Tue Jul 27, 2010 1:31 pm

Re: drag and drop

Post by stow »

Hi PHPHorizons,

i found a really good piece of code on the internet that I am now using however I can't get it to work.
This is the link I got it fromhttp://www.dhtmlgoodies.com/index.html? ... older-tree
When I put my code in it only shows up with the main folder (i.e. Admin) without the folder images that you can see on the demo.

My code.

admin page:

Code: Select all

<?php
session_start();
if (!isset($_SESSION['username']))
{
	header("location: ../login.html");
}
else
{
	$username = $_SESSION['username'];
	echo "Hi ".$username;
}
?>
<!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=utf-8" />
<title>Admin</title>
<script type="text/javascript" src="js/ajax.js"></script> 
<script type="text/javascript" src="js/context-menu.js"></script><!-- IMPORTANT! INCLUDE THE context-menu.js FILE BEFORE drag-drop-folder-tree.js --> 
<script type="text/javascript" src="js/drag-drop-folder-tree.js">
/************************************************************************************************************
	(C) http://www.dhtmlgoodies.com, July 2006
	
	Update log:
	
	
	This is a script from http://www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact.
	
	For more detailed license information, see http://www.dhtmlgoodies.com/index.html?page=termsOfUse 
	
	Thank you!
	
	http://www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/
</script>
<link rel="stylesheet" href="css/drag-drop-folder-tree.css" type="text/css"></link> 
	<link rel="stylesheet" href="css/context-menu.css" type="text/css"></link> 
	<style type="text/css"> 
	/* CSS for the demo */
	img{
		border:0px;
	}
	</style> 
	<script type="text/javascript"> 
	//--------------------------------
	// Save functions
	//--------------------------------
	var ajaxObjects = new Array();
	
	// Use something like this if you want to save data by Ajax.
	function saveMyTree()
	{
			saveString = treeObj.getNodeOrders();
			var ajaxIndex = ajaxObjects.length;
			ajaxObjects[ajaxIndex] = new sack();
			var url = 'saveNodes.php?saveString=' + saveString;
			ajaxObjects[ajaxIndex].requestFile = url;	// Specifying which file to get
			ajaxObjects[ajaxIndex].onCompletion = function() { saveComplete(ajaxIndex); } ;	// Specify function that will be executed after file has been found
			ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function			
		
	}
	function saveComplete(index)
	{
		alert(ajaxObjects[index].response);			
	}
 
	
	// Call this function if you want to save it by a form.
	function saveMyTree_byForm()
	{
		document.myForm.elements['saveString'].value = treeObj.getNodeOrders();
		document.myForm.submit();		
	}
	
 
	</script> 
</head>

<body>
<p align="right">Please hover over the comment tab to see the comment below</p>
<p>Summary of Files:</p>
<br />
<iframe frameborder="0" align="right" marginheight="0" marginwidth="0" height="500" width="350" scrolling="yes" style=" padding:none; margin:25px 55px 0 0; vertical-align:top;" name="fileComment"></iframe>
<?php include '../reform2.php'; ?>
     
<script type="text/javascript">	
treeObj = new JSDragDropTree();
treeObj.setTreeId('dhtmlgoodies_tree2');
treeObj.setMaximumDepth(7);
treeObj.setMessageMaximumDepthReached('Maximum depth reached'); // If you want to show a message when maximum depth is reached, i.e. on drop.
treeObj.initTree();
treeObj.expandAll();
</script>
<a href="#" onclick="treeObj.collapseAll()">Collapse all</a> | <a href="#" onclick="treeObj.expandAll()">Expand all</a> 
<br />
<p>To download the files click on its link</p>
<p>To delete the files click on the cross</p>
<a href="../upFile.php">Upload a File</a><br />
<a href="../createCED.php">Create, Edit, Delete a Comment</a><br />
<a href="../changeAcInfo.php">Change Account Information</a><br />
<a href="../logout.php">Log Out</a>
</body>
</html>

form2.php

Code: Select all

<script type="text/javascript">
function delete(file)
{
	del = new ActiveXObject("Scipting.FileSystemOject");
	f = del.GetFile(file);
	f.Delete();
}
function confirmDelete(delUrl) {
  if (confirm("Are you sure you want to delete")) {
    document.location = delUrl;
  }
}
</script>
<?php
$connection = mysql_connect("server","user","pass");
$db=mysql_select_db("db", $connection);

$username = "SELECT username FROM users";
$sql = mysql_query($username) or die(mysql_error());
echo "<ul id=\"dhtmlgoodies_tree2\" class=\"dhtmlgoodies_tree\">";//starting tree
	echo "<li id=\"node0\" noDrag=\"true\" noSiblings=\"true\" noDelete=\"true\" noRename=\"true\">Admin";//starting admin
		echo "<ul>";//starting admin list
			$i=1;
			while ($row = mysql_fetch_array($sql))
			{
				if($row['username'] != 'admin')
				{
					echo "<li id=\"node".$i."\"><a href=\"#\">".$row['username'];//username
					$i++;
						echo "<ul>";//starting username list
						
						$dir="../".$row['username']."/upload";
						if(file_exists($dir))
						{
							if($dh=opendir($dir))
							{
								if(($dhf = scandir($dir."/".$sd)) && (count($dhf)==3))
								{
									echo "<li id=\"node".$i."\">Directory is empty!</li>";
									$i++;
								}
								else
								{
									while (($sd = (readdir($dh))) !== false)
									{
										if($sd !="." && $sd !=".." && $sd != ".DS_Store" && $sd != "comments")
										{
											echo "<li id=\"node".$i."\"><a href=\"#\">".$sd."</a>";//folders
											$i++;
												echo "<ul>";//starting folders list
												if($dh2=opendir($dir."/".$sd))
												{
													if(($files = scandir($dir."/".$sd)) && (count($files) == 3))
													{
														echo "<li id=\"node".$i."\">Directory is empty!</li>";
														$i++;
													}
													else
													{
														while(($file=(readdir($dh2))) !== false)
														{
															if ($file != '.' && $file !='..' && $file !='.DS_Store' && $file !='comments' && $file !='dl.php')
															{
																echo "<li id=\"node".$i."\"><a href=\"#\">".$file."	</a><a href=\"../".$row['username']."/upload/".$sd."/dl.php?file=".$file."\"><img src=\"../dlArrow.jpg\" /></a>&nbsp;<a href=\"../".$row['username']."/upload/".$sd."/dl.php?file=".$file."$amp;delete=true\" onclick=\"return confirm('Are you sure you want to delete ".$file."?')\"><img src=\"../deleteCross.jpg\"/></a>";
																if (file_exists("../".$row['username']."/upload/comments/".$file.".txt"))
																{
																	echo "&nbsp;<a href=\"../".$row['username']."/upload/comments/".$file.".txt\" onmouseover=\"document.fileComment.location=this.href\" /><img src=\"../comment.jpg\"/></a></li>";
																	$i++;
																}
																else
																{
																	$i++;
																	echo "</li>";
																}
															}	
														}
													}
												}
												echo "</ul>";//ending folders list
											echo "</li>";//ending folders
										}		
									}
								}	
							}
						}
						echo "</ul>";//ending username list
					echo "</li>";//ending username
				}
			}
		echo "</ul>";//ending admin list
	echo "</li>";//ending admin
echo "</ul>";//ending tree
?>
the other included files can be downloaded from the website.

thanks
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: drag and drop

Post by PHPHorizons »

Thanks for posting the code, but that doesn't help.
If you can put up a page of what you have then I can help you figure this out. If you cannot do that, and you can only post code, then the code should be self contained (i.e., I can copy it and paste it to my web server and it will work).
Note the last part of that, where it should be possible to copy and paste the code and it works. You've got a database connection and a login deal, so that's not going to work.

Here's what you do: Load the page in question in your browser, and click on "View Source". Copy that, and paste it here. That is what I can use.

I have got to be able to see the web page in action, so I can see what it is and isn't doing. This being a JavaScript issue, the PHP source code is not as helpful as having the actual page.

Cheers
stow
Forum Newbie
Posts: 13
Joined: Tue Jul 27, 2010 1:31 pm

Re: drag and drop

Post by stow »

hey,

sorry... its been a long day. here's the page source when its loaded:

Code: Select all

Hi admin<!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=utf-8" /> 
<title>Admin</title> 
<script type="text/javascript" src="js/ajax.js"></script> 
<script type="text/javascript" src="js/context-menu.js"></script><!-- IMPORTANT! INCLUDE THE context-menu.js FILE BEFORE drag-drop-folder-tree.js --> 
<script type="text/javascript" src="js/drag-drop-folder-tree.js"> 
/************************************************************************************************************
	(C) http://www.dhtmlgoodies.com, July 2006
	
	Update log:
	
	
	This is a script from http://www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact.
	
	For more detailed license information, see http://www.dhtmlgoodies.com/index.html?page=termsOfUse 
	
	Thank you!
	
	http://www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/
</script> 
<link rel="stylesheet" href="css/drag-drop-folder-tree.css" type="text/css"></link> 
	<link rel="stylesheet" href="css/context-menu.css" type="text/css"></link> 
	<style type="text/css"> 
	/* CSS for the demo */
	img{
		border:0px;
	}
	</style> 
	<script type="text/javascript"> 
	//--------------------------------
	// Save functions
	//--------------------------------
	var ajaxObjects = new Array();
	
	// Use something like this if you want to save data by Ajax.
	function saveMyTree()
	{
			saveString = treeObj.getNodeOrders();
			var ajaxIndex = ajaxObjects.length;
			ajaxObjects[ajaxIndex] = new sack();
			var url = 'saveNodes.php?saveString=' + saveString;
			ajaxObjects[ajaxIndex].requestFile = url;	// Specifying which file to get
			ajaxObjects[ajaxIndex].onCompletion = function() { saveComplete(ajaxIndex); } ;	// Specify function that will be executed after file has been found
			ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function			
		
	}
	function saveComplete(index)
	{
		alert(ajaxObjects[index].response);			
	}
 
	
	// Call this function if you want to save it by a form.
	function saveMyTree_byForm()
	{
		document.myForm.elements['saveString'].value = treeObj.getNodeOrders();
		document.myForm.submit();		
	}
	
 
	</script> 
</head> 
 
<body> 
<p align="right">Please hover over the comment tab to see the comment below</p> 
<p>Summary of Files:</p> 
<br /> 
<iframe frameborder="0" align="right" marginheight="0" marginwidth="0" height="500" width="350" scrolling="yes" style=" padding:none; margin:25px 55px 0 0; vertical-align:top;" name="fileComment"></iframe> 
<script type="text/javascript"> 
function delete(file)
{
	del = new ActiveXObject("Scipting.FileSystemOject");
	f = del.GetFile(file);
	f.Delete();
}
function confirmDelete(delUrl) {
  if (confirm("Are you sure you want to delete")) {
    document.location = delUrl;
  }
}
</script> 
<ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree"><li id="node0" noDrag="true" noSiblings="true" noDelete="true" noRename="true">Admin<ul><li id="node1"><a href="#">user<ul><li id="node2">Directory is empty!</li></ul></li><li id="node3"><a href="#">user1<ul><li id="node4"><a href="#">prog1</a><ul><li id="node5"><a href="#">file1.txt	</a><a href="../user1/upload/prog1/dl.php?file=file1.txt"><img src="../dlArrow.jpg" /></a>&nbsp;<a href="../user1/upload/prog1/dl.php?file=file1.txt;delete=true" onclick="return confirm('Are you sure you want to delete file1.txt?')"><img src="../deleteCross.jpg"/></a>&nbsp;<a href="../user1/upload/comments/file1.txt.txt" onmouseover="document.fileComment.location=this.href" /><img src="../comment.jpg"/></a></li><li id="node6"><a href="#">file2.txt	</a><a href="../user1/upload/prog1/dl.php?file=file2.txt"><img src="../dlArrow.jpg" /></a>&nbsp;<a href="../user1/upload/prog1/dl.php?file=file2.txt;delete=true" onclick="return confirm('Are you sure you want to delete file2.txt?')"><img src="../deleteCross.jpg"/></a></li></ul></li><li id="node7"><a href="#">prog2</a><ul><li id="node8">Directory is empty!</li></ul></li><li id="node9"><a href="#">prog3</a><ul><li id="node10"><a href="#">file1.txt</a><a href="../user1/upload/prog3/dl.php?file=file1.txt"><img src="../dlArrow.jpg" /></a>&nbsp;<a href="../user1/upload/prog3/dl.php?file=file1.txt;delete=true" onclick="return confirm('Are you sure you want to delete file1.txt?')"><img src="../deleteCross.jpg"/></a>&nbsp;<a href="../user1/upload/comments/file1.txt.txt" onmouseover="document.fileComment.location=this.href" /><img src="../comment.jpg"/></a></li></ul></li><li id="node11"><a href="#">prog4</a><ul><li id="node12">Directory is empty!</li></ul></li></ul></li></ul></li></ul>     
<script type="text/javascript">	
treeObj = new JSDragDropTree();
treeObj.setTreeId('dhtmlgoodies_tree2');
treeObj.setMaximumDepth(7);
treeObj.setMessageMaximumDepthReached('Maximum depth reached'); // If you want to show a message when maximum depth is reached, i.e. on drop.
treeObj.initTree();
treeObj.expandAll();
</script> 
<a href="#" onclick="treeObj.collapseAll()">Collapse all</a> | <a href="#" onclick="treeObj.expandAll()">Expand all</a> 
<br /> 
<p>To download the files click on its link</p> 
<p>To delete the files click on the cross</p> 
<a href="../upFile.php">Upload a File</a><br /> 
<a href="../createCED.php">Create, Edit, Delete a Comment</a><br /> 
<a href="../changeAcInfo.php">Change Account Information</a><br /> 
<a href="../logout.php">Log Out</a> 
</body> 
</html>
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: drag and drop

Post by PHPHorizons »

Alrighty, that will do ;) and no need to apologize.

There is an error happening at this line:

Code: Select all

treeObj.initTree();
The text of the error message is:
Error: uncaught exception: [Exception... "Node was not found" code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)" location: "http://www.example.com/js/drag-drop-folder-tree.js Line: 807"]
I'm not skilled with the particular javascript library you are using. I would suggest forwarding this error message to them and asking for assistance, or perhaps someone else here can help.

Cheers and good luck.
stow
Forum Newbie
Posts: 13
Joined: Tue Jul 27, 2010 1:31 pm

Re: drag and drop

Post by stow »

Thanks for finding the error. Do you know any other way I could achieve a similar result?

stow
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: drag and drop

Post by PHPHorizons »

I don't know of any Tree View widgets that can be sorted using Drag and Drop off hand. I'm sure jQuery has something for that.
stow
Forum Newbie
Posts: 13
Joined: Tue Jul 27, 2010 1:31 pm

Re: drag and drop

Post by stow »

Thanks for all your help
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: drag and drop

Post by pickle »

Ya, check jqueryui.com for their draggable/droppable/sortable widgets.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply