开发者

Drag and drop and insert into MySQL

This is my first question here. Long story short, I want to do this:

http://jqueryui.com/demos/draggable/#sortable

But, when I drag the "drag me down" box to the sortable list below, I want it to add a row to my MySQL table using PHP. I could achieve part of what I want like this:

http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php

But I want the user to be able to sort as in the jqueryui demo.

In the jqueryui demo, where "drag me down" sits in the above example, there would be a list of choices. The list would be the result of a query to a MySQL table. Where item 1, 2, 3 are in the jqueryui example, it would be blank until the user dragged their desired list items into the item 1/2/3 area, which should be sortable (i.e. be able to drag the list items around in the list and create the desired order).

So, how do I insert into the database when a new list it开发者_开发技巧em is dragged into the item 1/2/3 area. I know how to achieve the sorting. But I have no idea how to actually add items to a list to be able to sort them. And Google searches have turned up nothing useful.

Can anyone help point me in the right direction?


I'm not quite understanding what you are asking here.

But I have no idea how to actually add items to a list to be able to sort them

If you have achieved what is in the jQuery UI Demo then I expect you are looking at how to serialize the users modifications and send modifications to the server in-order to update the database.

If so then you may want to look at the sortable method serialize which serializes the lists id in order to send as an Ajax request.

.sortable( "serialize" , [options] )

There is also the change event that you can hook into when the user has changed the sort.

$( ".selector" ).bind( "sortchange", function(event, ui) {
    ...
});


Start off small and get javascript / jquery to set off an alert() or console.log() when 'the user dragged their desired list items into the item'. Then replace that alert() or console.log() with a ajax request.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜