drag and drop
Moderator: General Moderators
drag and drop
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
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
- PHPHorizons
- Forum Contributor
- Posts: 175
- Joined: Mon Sep 14, 2009 11:38 pm
Re: drag and drop
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
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
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:
form2.php
the other included files can be downloaded from the website.
thanks
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> <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
?>
thanks
- PHPHorizons
- Forum Contributor
- Posts: 175
- Joined: Mon Sep 14, 2009 11:38 pm
Re: drag and drop
Thanks for posting the code, but that doesn't help.
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
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.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).
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
hey,
sorry... its been a long day. here's the page source when its loaded:
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>
- PHPHorizons
- Forum Contributor
- Posts: 175
- Joined: Mon Sep 14, 2009 11:38 pm
Re: drag and drop
Alrighty, that will do
and no need to apologize.
There is an error happening at this line:
The text of the error message is:
Cheers and good luck.
There is an error happening at this line:
Code: Select all
treeObj.initTree();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.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"]
Cheers and good luck.
Re: drag and drop
Thanks for finding the error. Do you know any other way I could achieve a similar result?
stow
stow
- PHPHorizons
- Forum Contributor
- Posts: 175
- Joined: Mon Sep 14, 2009 11:38 pm
Re: drag and drop
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
Thanks for all your help
Re: drag and drop
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.