Member Avatar for jj.amonit

I know how to work with php, mysql. I know enough to get results with CSS. I am now trying to incorporate some javascript and dhtml into my work. But what I want to do is a little more involved that the simple tutorials.

i am using ixedit to help me create a drag and drop workspace. I want to be able to drag an item, drop it into another item and have it then make the changes in my database. Kind of like dropping a file into a folder in Windows Explorer. My problem is in two parts. I will try to lay it out first.

I am not at my development pc, so I do not have the code to post right now. I will add it later tonight. I just want to get this thread created and start talking.

Here's the general framework though. I have a couple of css id's created. #filetobedragged and #foldertobedroppedinto. Each have the image locations, position, etc.

To create a 'file', I used <div id = filetobedragged> and for a 'folder' <div id= foldertobedroppedinto>

The javascript gives the usability. What each css id is supposed to do upon dragging and dropping. None of it is connected to the db just yet when anything is dropped.

The functionality is working fine, except when I add more than one file or folder. Since they will all have the same css id's. For example, I have it say 'thanks' when I drop a file into a folder. When I add the second folder, both folders says 'thanks'. Only the folder that the file was dropped into should say 'thanks'. But it's the id's that tell the javascript what to do. and both 'folders' have the same css id. This becomes even harder to work with when I begin to try to tell the db that 'file1' was dropped into 'folder2'.

so here are the questions.

How to I keep functionality while still maintaining the items' individuality? When I drop item 1 into folder 2, it should do the same stuff as item 1 into folder 3, but communicate the proper info to the db?

And secondly,what is the code needed to create the httprequest? The code that says, "when the file is dropped, call up 'senddatatodb.php'". I have learned through tutorials that you can use onReadyStatechange(), but that will that work here since it's <div>?


I understand that it might be hard to diagnose or offer advice based on this info. I will try to get the code i am using added when I get back to my pc.

Thanks for any help in the future.

  • 1 Contributor
  • 1 Reply
  • 234 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by jj.amonit
Member Avatar for jj.amonit

As I promised, here is the code I am using.

Here is the CSS that I am using.

#dragdropcontainer { 
  width: 100%;
  height: 500px;
  border: 1px dotted #000;
  position: relative;
  background-color: #fff;
}
#filetobedragged { 
  width: 48px;
  height: 48px;
  color: black;
  background-color: transparent;
  background-image: url(img/note32.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  text-align: center;
  overflow: visible;

}
#foldertobedropped { 
  width: 48px;
  height: 48px;
  color: black;
  background-color: transparent;
  background-image: url(img/folder32.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  text-align: center;
  overflow: visible;
}
#dragdropcontainer span { 
  position: relative;
  display: block;
  top: 48px;
  left: -25px;
  width: 100px;
}
#dragdropcontainer .drophover { 
  background-color: transparent !important;
  background-image: url(img/folder34.png);
  background-repeat: no-repeat;
  background-position: px 0;
}

Here is the code I am using. The javascript was created by IX Edit.

<html>
<head>
<script type="text/javascript" src="jquery/jquery-plus-jquery-ui.js"></script>
<link type="text/css" href="sample-style/ui-sui.css" rel="stylesheet" />

           <script type='text/javascript'>
            	/* ------ Code generated by IxEdit (ixedit.com). ------ */
            	if(window.ixedit){ixedit.deployed = true};
            	if(window.jQuery){jQuery(function(){
            		(function(){ var target = jQuery('div#filetobedragged'); target.draggable({containment:'parent'}); var target = jQuery('div#foldertobedropped'); target.droppable({hoverClass: 'drophover','tolerance':'pointer'}); var target = jQuery('div#foldertobedropped'); target.draggable({containment:'parent'}); var target = jQuery('form#proj'); target.hide(0); })();
            		(function(){ jQuery('div#foldertobedropped').bind('drop', function(event, ui){var target = jQuery('div#filetobedragged'); target.hide('explode', { pieces: 9 }, 500); var target = jQuery('div#foldertobedropped span'); target.html('Thanks')});})();
            		(function(){ jQuery('a#projlink').bind('click', function(event, ui){var target = jQuery('form#proj'); target.slideToggle(0)});})();
            	})};
            </script>
</head>
<body>
        
<?php 



echo "<div id='dragdropcontainer'>
        <div id='filetobedragged' style='position: absolute; top: 75px; left: 270px;'>
          <span>Drag me</span>
        </div>";

$x = 25; //initial position of folder x-axis
$y = 0;  //initial position of folder y-axis
//get list of projects and their data.
    $projsql = "SELECT project_id, project_name FROM project WHERE " . 
               "user_id = '" . $_SESSION['user_id'] . "'";
        $projresult = mysql_query($projsql)
        	or die (mysql_error());
        $rows = mysql_num_rows($projresult);
if ($rows != 0){
    //for each project
        while ($row=mysql_fetch_assoc($projresult)) {
              $project_name = $row['project_name'];
              $project_id = $row['project_id'];
              //create the folders lines to create the tabs.
       echo  "<div id='foldertobedropped' style='position: absolute; top: ".$y."px; left: ".$x."px;'>
                <span>" . $project_name . "</span></div>";
       if ($y <= 500){
          $y = 60 + $y;
       }else{
          $y =0;
          $x = 60 + $x;
       }
?>       
</body>
</html>
        }//close out the for each
echo "</div>";

Again, I am looking for how to create the filetobedragged so that I can differentiate between them when I try to send the involved items to the db.

Also, I am looking for the code on how to send the necessary info to a script that will enter the data into the db. Any help will be greatly appreciated.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.