zuires supports this item


6 comments found.

Sorry to sound silly, but this script support updates to databases. I’m assuming it can via ajax style calls If it does can you provide a crude a example of updating the database.

Send a request to the backend:
jQuery.ajax("/backend", {
    method: "POST" // default is GET
    success: function(response, status, xhr) {
        alert("Sortable saved by the backend");
    error: function(xhr, status, error) {
        alert("Something went wrong");
    data: $("#your-sortable").sortable().toJson()
Example output of $(”#your-sortable”).sortable().toJson():
      "title":"Hi, drag me!",
      "customSelect":"select something...",
      "__sortable_params":{ }
      "title":"No! Wait, drag me instead!",
      "__sortable_params":{ }
Save the JSON output in your database. Retrive Sortable state with:
$("#your-sortable").sortable().parseJson(JSON from backend...)
Notice that you’re actually just doing:
In the case of many languages, you’re able to convert JSON to arrays, for example in PHP (PHP 5 >= 5.2.0, PECL json >= 1.2.0, PHP 7):
mixed json_decode(string JSON...)
You can convert it to an array and perform back-end stuff on it.

Let me know if you need any further assistance, thanks for your comment.

good job, i wish you all the best for your sales ;)

Thanks, appreciated!

are you going to make this jquery 3 compatible? and also provide sass support?

Sortable already supports jQuery 3.x. CSS is automatically convertible to SASS. The main css-file should not be edited, but instead, it should be overwritten exactly like Bootstrap. Thanks for your interest. If you would like me to consider any other cool features, please let me know!

How to make some items “non-deletable” ?

Remove HTML-markup of the remove button from your blueprint template.

Ok, but I understand this will remove it from ALL items, I just want to have it removed from SOME items …

You can create another Sortable instance with disabled removing and then allow both instances to mutually merge items. You might want to revise your solution as merged non-removable and removable items will be a confusing mix.

There is no way to tell only specific items to not allow removing. Since, if it was, you would need multiple add-buttons to trigger the right template. And then each of the add-buttons on the items would need more information as well…

Excellent code! Wish you many sales. For me though, would this code work within a WordPress page or site?


The code will work but transferring data from front- to back-end will be a pain (Wordpress doesn’t implement it by default). For this you would need a Wordpress plugin wrapper for Sortable. This script as it is, is meant for developers.

Great ! Good luck