Error with drag and drop script

#1
MicroBoy

Posted 24 May 2011 - 02:51 PM

Newbie

Members
22 posts

Hi to all, I have a script which I use to drag and drop image's thumbs and to save the order in MySQL, everything works ok when the script is like above in the first section, but when I add a div the script does not work, the order is not saved on MySQL, where can be the problem?? at the javascript file? at the php file?? I atached the javascript file which is used for drag and drop.

This way it works:

<div id="sortable-thumbs">

	<?php

                include("connect.php");

				$query  = "SELECT * fashion ORDER BY listorder ASC";

				$result = mysql_query($query);

				while($row = mysql_fetch_array($result, MYSQL_ASSOC))

				{

					

				$id = stripslashes($row['id']);

				$emri = stripslashes($row['emri']);

				$lidhja = stripslashes($row['lidhja']);

					

				?>

    	  <img src="../imazhet/fashion/thumbs/<?php echo $lidhja; ?>" id="<?php echo $id; ?>" alt="" height="100" width="100" />

			<?php

		  }

		  ?>

	</div>

But I need it like this and it does not work:

<div id="sortable-thumbs">

		<?php

                include("connect.php");

				$query  = "SELECT * FROM fashion ORDER BY listorder ASC";

				$result = mysql_query($query);

				while($row = mysql_fetch_array($result, MYSQL_ASSOC))

				{

					

				$id = stripslashes($row['id']);

				$emri = stripslashes($row['emri']);

				$lidhja = stripslashes($row['lidhja']);

					

				?>

				<div class="foto_thumbs">

            		<img src="../imazhet/fashion/thumbs/<?php echo $lidhja; ?>" id="<?php echo $id; ?>" alt="" height="90" width="90" />

            		<div class="info_th">21332views <a href="#"><img src="images/del_icon.jpg" width="17" height="17" alt="Delete" /></a></div>

            	</div>

		  <?php

		  }

		  ?>

		</div>

Attached Files

sortThumbs.js 1.29K 57 downloads

#2
da beast

Posted 24 May 2011 - 09:40 PM

Newbie

Members
25 posts

I know this doesn't answer your question but imo this is easier and future ready!

HTML5 Drag and Drop Upload and File API Tutorial

#3
oldhendra

Posted 25 May 2011 - 08:21 AM

Learning Programmer

Members
30 posts

I could only guess,
"sortThumbs.js" only searches and sorts <img> elements as the children of "#sortable-thumbs", but not as the grandchildren?

#4
MicroBoy

Posted 25 May 2011 - 10:18 AM

Newbie

Members
22 posts

Yep I think too but how can I do to sort another div too?

#5
oldhendra

Posted 25 May 2011 - 11:23 AM

Learning Programmer

Members
30 posts

You are using Mootools' Sortable... MooTools Docs - Drag/Sortables, no? Well it seems that your HTML structure is quite different from them. Try following their <ul><li> structure instead of <div><div>?

#6
MicroBoy

Posted 25 May 2011 - 12:08 PM

Newbie

Members
22 posts

Yep the script uses mootools, here you can find the script that I use, that one that u showed uses UL and LI cause it sorts texts not images:

http://kodegeek.wordpress.com/2009/07/22/facebook-like-photo-order-sorting-in-mootools/

#7
oldhendra

Posted 25 May 2011 - 03:46 PM

Learning Programmer

Members
30 posts

You are right, this has nothing to do with HTML structures. Both work well :thumbup1:
Perhaps you should check again your mootools' "core" and "more" downloads,
I've spent quite sometime downloading them, until my code (below) works without any browser errors:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body{
         margin:0;
         padding:0;
        }
        #sortable-thumbs{
         margin:20px auto;
        }
        #sortable-thumbs > div{
            float: left;
            padding: 10px;
        }
        #sortable-thumbs > div > div{
            background-color: red;
            color: white;
            text-align: center;
            padding: 2px;
        }
        #sortable-thumbs img{
         width:100px;
        }
    </style>

    <script type="text/javascript" src="mootools-core-1.3.2-full-compat.js"></script>
    <script type="text/javascript" src="mootools-more-1.3.2.1.js"></script>
    <script type="text/javascript">
        window.addEvent('domready', function() {
            /* create sortables */
            var sb = new Sortables('sortable-thumbs', {
                /* set options */
                clone:true,
                revert: true,
                /* once an item is selected */
                onStart: function(el,cl) {
                    el.setStyle('background','#EEEEEE');
                },
                onSort: function(el, clone){
                    sorted = true;
                },
                /* when a drag is complete */
                onComplete: function(el) {
                    el.setStyle('background','#FFFFFF');
                }
            });
        });
    </script>

    <title>Sortables Thumbs</title>
</head>

<body>
    <div id="sortable-thumbs">
        <div>
            <img src="http://www.dogsvitalsigns.com/images/poodle.jpg" id="1" alt="" />
            <div>poodle</div>
        </div>
        <div>
            <img src="http://www.dogsvitalsigns.com/images/saint%20bernard.jpg" id="2" alt="" />
            <div>bernard</div>
        </div>
        <div>
            <img src="http://www.dogsvitalsigns.com/images/greyhound.jpg" id="3" alt="" />
            <div>greyhound</div>
        </div>
        <div>
            <img src="http://www.dogsvitalsigns.com/images/beagle.jpg" id="4" alt="" />
            <div>beagle</div>
        </div>
        <div>
            <img src="http://www.dogsvitalsigns.com/images/golden%20retriever.jpg" id="5" alt="" />
            <div>retriever</div>
        </div>
    </div>
</body>
</html>

#8
MicroBoy

Posted 26 May 2011 - 05:46 AM

Newbie

Members
22 posts

Yep it works but I need in this way, to give me some arrays for the new order of the images, this is the code that I use to give me the arrays of the new order but when I add the divs it give me empty arrays, when I delete the divs it gives me the right arrays:

 <script type="text/javascript">

 window.addEvent('domready', function() {

 /* create sortables */

 var sb = new Sortables('sortable-thumbs', {

 /* set options */

 clone:true,

 revert: true,

 /* once an item is selected */

 onStart: function(el,cl) {

 el.setStyle('background','#EEEEEE');

 },

 onSort: function(el, clone){

 sorted = true;

 },

 /* when a drag is complete */

 onComplete: function(el) {

 el.setStyle('background','#FFFFFF');

if(sorted) {

              sorted = false; // clear it out again

              

                //build a string of the order

          			var sort_order = '';    			

          			sort_order = sb.serialize();

          			

          			//do an ajax request

          			var req = new Request({

          					url:'save.php',

          					method:'post',

          					autoCancel:true,

          					data:'sort_order=' + sort_order,

          					onRequest: function() {},

          					onSuccess: function(data) {

							alert(data);

                       //update divs if needed

          					}

          				}).send();

          				

          			}

 }

 });

 });

 </script>

#9
MicroBoy

Posted 26 May 2011 - 06:01 AM

Newbie

Members
22 posts

Yep your script works but I have to add the listorder on the MySQL and your script does do it, the script has to give me arrays of the new order list, I have this script but when I add the divs the arrays are empty, when I delete divs the arrays are ok:

 <script type="text/javascript">

 window.addEvent('domready', function() {

      /* create sortables */

    	var sb = new Sortables('sortable-thumbs', {

    		/* set options */

    		clone:true,

    		revert: true,

    		/* initialization stuff here */

    		initialize: function() {


    		},

    		/* once an item is selected */

    		onStart: function(el,cl) {

    			el.setStyle('background','#EEEEEE');

    		},

    		onSort: function(el, clone){

          sorted = true;

        },

    		/* when a drag is complete */

    		onComplete: function(el) {

    			el.setStyle('background','#FFFFFF');


    			if(sorted) {

              sorted = false; // clear it out again


                //build a string of the order

          			var sort_order = '';

          			sort_order = sb.serialize();


          			//do an ajax request

          			var req = new Request({

          					url:'save.php',

          					method:'post',

          					autoCancel:true,

          					data:'sort_order=' + sort_order,

          					onRequest: function() {},

          					onSuccess: function(data) {

          					 	alert(data);

                       //update divs if needed

          					}

          				}).send();


          			}


    		}

    	});


});


 </script>