Page 1 of 1
drag and drop
Posted: Sun Aug 15, 2010 7:36 am
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
Re: drag and drop
Posted: Sun Aug 15, 2010 9:15 am
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
Re: drag and drop
Posted: Mon Aug 16, 2010 10:37 am
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 from
http://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> <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 " <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
Re: drag and drop
Posted: Mon Aug 16, 2010 11:08 am
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
Re: drag and drop
Posted: Mon Aug 16, 2010 2:56 pm
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> <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> <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> <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> <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> <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>
Re: drag and drop
Posted: Mon Aug 16, 2010 7:30 pm
by PHPHorizons
Alrighty, that will do

and no need to apologize.
There is an error happening at this line:
The text of the error message is:
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.
Re: drag and drop
Posted: Tue Aug 17, 2010 6:07 am
by stow
Thanks for finding the error. Do you know any other way I could achieve a similar result?
stow
Re: drag and drop
Posted: Tue Aug 17, 2010 6:54 am
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.
Re: drag and drop
Posted: Tue Aug 17, 2010 7:09 am
by stow
Thanks for all your help
Re: drag and drop
Posted: Tue Aug 17, 2010 10:32 am
by pickle
Ya, check jqueryui.com for their draggable/droppable/sortable widgets.