Drag and Drop with jQuery and PHP

JavaScript and client side scripting.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Drag and Drop with jQuery and PHP

Post by simonmlewis »

http://www.simonbattersby.com/blog/drag ... jquery-ui/
I am trying to follow this but we want to do it with DIVs and not <ul> tags. Our code made these have dots by them.

Is there a similar method to this, or can this be adjusted to do the same thing, but with DIVs?

So we can order DIVs by dragging and dropping....
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Drag and Drop with jQuery and PHP

Post by Celauran »

Should be exactly the same, just swap ul for div. ul makes more sense semantically, though.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Drag and Drop with jQuery and PHP

Post by simonmlewis »

http://www.bewebdeveloper.com/tutorial- ... ry-and-php
I'm having a go at this one.
My "order" field is called priority, and is used elsewhere.

I can extract it all in how they do it, but when I get the cross hairs to move it, nothing moves.
I have all the file and JS files referenced correctly.

Code: Select all

<script type="text/javascript" src="/js/dragdrop/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/js/dragdrop/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="/js/dragdrop/script.js"></script>
<style>
/* Sortable ******************/
#sortable { 
	list-style: none; 
	text-align: left; 
}
#sortable li { 
	margin: 0 0 10px 0;
	height: 75px; 
	background: #dbd9d9;
	border: 1px solid #999999;
	border-radius: 5px;
	color: #333333;
}
#sortable li span {
	background-color: #b4b3b3;
	background-image: url('../images/drag.png');
	background-repeat: no-repeat;
	background-position: center;
	width: 30px;
	height: 75px; 
	display: inline-block;
	float: left;
	cursor: move;
}
#sortable li img {
	height: 65px;
	border: 5px solid #cccccc;
	display: inline-block;
	float: left;
}
#sortable li div {
	padding: 5px;
}
#sortable li h2 {    
	font-size: 16px;
    line-height: 20px;
}

</style>

$sql = "SELECT * FROM static WHERE section = 'magazine50' ORDER BY priority";
$query = $pdo->prepare($sql);
$query->execute();
$list = $query->fetchAll();

        echo "<ul id='sortable'>";
            foreach ($list as $rs) {
            ?>
            <li id="<?php echo $rs['id']; ?>">
                <span></span>
                <img src="/images/pages/<?php echo $rs['image']; ?>">
                <div><?php echo $rs['content']; ?></div>
            </li>
            <?php
            }

        echo "</ul>
<div style='clear: both' /></div><br/><br/>";
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Drag and Drop with jQuery and PHP

Post by Celauran »

Any errors in the console? I can't see the JS, I can't see what else is on the page, so I really don't have much to work with.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Drag and Drop with jQuery and PHP

Post by simonmlewis »

attached
Attachments
dragdrop.zip
files
(133.39 KiB) Downloaded 754 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Drag and Drop with jQuery and PHP

Post by Celauran »

Works fine for me. http://jsfiddle.net/9Lxmqagc/

Again, any errors in the console?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Drag and Drop with jQuery and PHP

Post by simonmlewis »

The first and last error disappears after a second.
Attachments
Here it is.
Here it is.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Drag and Drop with jQuery and PHP

Post by Celauran »

Not recognizing sortable() as a function. I'd check your jQuery UI. Since it's modular, it's possible you don't have sortable included.

Also, unrelated to the error but related to a discussion we were having yesterday, why not use a minified jQuery? That's a particularly heavy script.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Drag and Drop with jQuery and PHP

Post by simonmlewis »

I'd check your jQuery UI. Since it's modular, it's possible you don't have sortable included.
How do I check if it's modular, and then enable it so it is sortable?

And yes I will look into the appropriate plugin for that in minify. Thanks for recalling. :)
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Drag and Drop with jQuery and PHP

Post by Celauran »

Check the top of the script
[text]/*! jQuery UI - v1.11.4 - 2015-08-14
* http://jqueryui.com
* Includes: core.js, widget.js, position.js, autocomplete.js, menu.js
[/text]
That Includes line tells you which modules are included. Sortable needs to be there. You can head over to the jQuery UI download page to either build your own or just grab everything.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Drag and Drop with jQuery and PHP

Post by simonmlewis »

Sorry friend I'm lost now.
You just used their code and it worked.
I'm using their code and it doesn't. So what am I doing differently?!?!

This is in the script.js file:

Code: Select all

/*
* Author : Ali Aboussebaba
* Email : bewebdeveloper@gmail.com
* Website : http://www.bewebdeveloper.com
* Subject : Dynamic Drag and Drop with jQuery and PHP
*/

$(function() {
    $('#sortable').sortable({
        axis: 'y',
        opacity: 0.7,
        handle: 'span',
        update: function(event, ui) {
            var list_sortable = $(this).sortable('toArray').toString();
    		// change order in the database using Ajax
            $.ajax({
                url: 'set_order.php',
                type: 'POST',
                data: {list_order:list_sortable},
                success: function(data) {
                    //finished
                }
            });
        }
    }); // fin sortable
});
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Drag and Drop with jQuery and PHP

Post by Celauran »

I don't think their code specifically is the issue. Your site, for whatever reason, doesn't recognize sortable() as a function. Check the jQuery UI package that you're using. Check that it's the only one you're using, and that you aren't calling multiple versions of it, or multiple versions of jQuery.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Drag and Drop with jQuery and PHP

Post by simonmlewis »

Blasted Facebox code was killing it.
So now I have it dragging fine, but it's not updating the database for me.

This is the set_order.php file that should be doing that.
All I have changed from the original, is the dbconn.php file to be used, and :priority.
Also, not sure where "list_order" is posted from and I suspect that is the culprit.

Code: Select all

    <?php
    // including the config file
    include('dbconn.php');
    $pdo = connect();
     
    // get the list of items id separated by cama (,)
    $list_order = $_POST['list_order'];
    // convert the string list to an array
    $list = explode(',' , $list_order);
    $i = 1 ;
    foreach($list as $id) {
    	try {
    	    $sql  = 'UPDATE static SET priority = :priority WHERE id = :id' ;
    		$query = $pdo->prepare($sql);
    		$query->bindParam(':priority', $i, PDO::PARAM_INT);
    		$query->bindParam(':id', $id, PDO::PARAM_INT);
    		$query->execute();
    	} catch (PDOException $e) {
    		echo 'PDOException : '.  $e->getMessage();
    	}
    	$i++ ;
    }
    ?>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Drag and Drop with jQuery and PHP

Post by Celauran »

In that case I'd start by checking the contents and structure of list_order. console.log it and cut out the AJAX call for now.

Also, pro tip, prepared statements only need to be prepared once and can then be run multiple times. You can move the query definition and prepare call outside the loop and just execute inside it.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Drag and Drop with jQuery and PHP

Post by simonmlewis »

In your technically, I take it you mean to look at the contents of "list_order"?
Sorry I actually don't know how.
I was assuming it would post the data via the AJAX call, update my database, and job done.

Within this:

Code: Select all

    <?php
    // including the config file
    include('dbconn.php');
    $pdo = connect();
     
    // get the list of items id separated by cama (,)
    $list_order = $_POST['list_order'];
    // convert the string list to an array
    $list = explode(',' , $list_order);
    $i = 1 ;
    foreach($list as $id) {
    	try {
    	    $sql  = 'UPDATE static SET priority = :priority WHERE id = :id' ;
    		$query = $pdo->prepare($sql);
    		$query->bindParam(':priority', $i, PDO::PARAM_INT);
    		$query->bindParam(':id', $id, PDO::PARAM_INT);
    		$query->execute();
    	} catch (PDOException $e) {
    		echo 'PDOException : '.  $e->getMessage();
    	}
    	$i++ ;
    }
    ?>
Where is it getting $id from? I don't see anything being posted through.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply