Drag and Drop with jQuery and PHP

JavaScript and client side scripting.

Moderator: General Moderators

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 »

It's getting $id from the sorted list. You have id= in your li.
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 »

Ive' done it. The $pdo = connect() was causing it to fail, because I assume, that code is already in the dbconn file.
It works and sorts it.
:)
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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 »

Can you see any reason why this should work in the same way?


Code: Select all

<style>
.magazinetile
{
position: relative;
float: left;
width: 455px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
background-color: #000000;
}

.magazinetile-content
{
background-color: #ffffff;

text-align: center;
}

.magazinetile-content a
{
padding: 7px;
text-decoration: none;
display: block;
}


.magazinetile img
{
width: 100%;
opacity: 0.85;
}

.magazinetile img:hover
{
opacity: 1.0;
}

.magazinetile img
{
 transition: opacity 0.5s;
width: 100%;
}

.magazinetile span
{
	width: 30px;
	height: 75px; 
border: 1px solid #ff0000;
	display: inline-block;
	float: left;
	cursor: move;
	}
</style>
$sql = "SELECT * FROM static WHERE section = 'magazine50' ORDER BY priority";
$query = $pdo->prepare($sql);
$query->execute();
$list = $query->fetchAll();
echo "<div id='sortable'>";
foreach ($list as $row) {
$countsquare ++;
echo "<div id='$row[id]' class='magazinetile'";
if (($countsquare % 2) == 0) { echo " style='margin-right: 0px'";}
echo "><a href='$row[url]'><img src='/images/pages/$row[image]' alt='$row[freetext]' /></a>
<div class='magazinetile-content'><a href='$row[url]'>$row[content]</a></div>
<div id='infoi'><span></span><a rel='facebox' href='#edittext$row[id]' class='infoilink'>($row[priority]) EDIT&nbsp;&nbsp;|&nbsp;&nbsp;<a href='/a_magazine&did=$row[id]&u=deletebanner' class='infoilink' onclick=\"javascript:return confirm('Are you sure you want to delete this banner and content?');\">DELETE</a><br/>$row[freetext]</div>

</div>";
if (($countsquare % 2) == 0)
{
echo "<div style='clear: both' /></div>";
}
  $catid = NULL;
$subid = NULL;
$id = NULL;
}
echo "<div style='clear: both' /></div></div><br/>";
It's not dragging at all.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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've worked out to adjust the CSS for the UL version, the odd thing tho is that s only lets you drag up and down - not left right, which is a pain if it is a tiled set of galleries images?!
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 »

Well yeah. axis: "y"

Get rid of that and you should be fine.
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 »

Yes I tried that. I even set it to X, and it still only lets me move the boxes up and down.
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 »

Might just be a question of refreshing your browser. Clearly works: http://jsfiddle.net/2s3wewko/2/
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 »

Try this too, based on the comments on their page:

Code: Select all

$(function() {
    $('#sortable').sortable({
    axis: false,
        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.
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 »

Bingo - i had the same code or old code on the pge that was over riding it.
Fool!!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply