Page 1 of 2
Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 7:38 am
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....
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 7:43 am
by Celauran
Should be exactly the same, just swap ul for div. ul makes more sense semantically, though.
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 7:59 am
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/>";
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 8:03 am
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.
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 8:14 am
by simonmlewis
attached
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 8:30 am
by Celauran
Works fine for me.
http://jsfiddle.net/9Lxmqagc/
Again, any errors in the console?
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 8:46 am
by simonmlewis
The first and last error disappears after a second.
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 8:51 am
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.
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 8:54 am
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.

Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 8:58 am
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.
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 9:01 am
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
});
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 9:16 am
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.
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 9:29 am
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++ ;
}
?>
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 9:35 am
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.
Re: Drag and Drop with jQuery and PHP
Posted: Fri Aug 14, 2015 9:40 am
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.