zuires supports this item


12 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

i need some help, trying to just show json like you had above but i dont understand this language whatsoever

Hi, what have you tried so far? What errors are you getting?

Hello, we bought Sortable module and try to use it with Angular. Can you help us to identify item that was moved, created or smth. Callback gets jQuery $item, and I`m not sure how deal with it the best way. Thank you! We used a @bejaboo.com mail.

Thank you for you message.

I am assuming that the message is from bejaboo to whom I have already replied. Please let’s continue our chat below.

Hello, we bought Sortable module and try to use it with Angular. Can you help us to identify item that was moved, created or smth. Callback gets jQuery $item, and I`m not sure how deal with it the best way. Thank you! We used a @bejaboo.com mail.

To do that you need to loop recursively through your Sortable instance over .dd-item elements. Every .dd-item is a dom node so you can either alter it with pure Javascript or use a wrapper like jQuery.

Is it possible to implement drag scroll?

Hi, sorry for the delay! I am assuming that you are asking this question because you have recognized some scrolling problem. However, without specifying the problem in specific terms I am only able to give you a general answer.

You can either scroll OR drag, dragging and scrolling cannot be performed simultaneously. Since some parts of the plugin are draggable there are parts of the plugin where scrolling cannot be initiated and therefore will not work. You can drag scroll if you initiate scrolling on parts which are not sensitive to dragging, in which case drag scroll will work just fine.

Please, let me know if you have any other questions!

If I wanted to deactivate some field in some occasions could? For example the Shop menu has a select, can I deactivate the one li and activate it if json includes it?

I am sorry I don’t understand. Could you elaborate?

I am trying to sort json that I am importing from a link….how do I set it to accept nested arrays after importing the json data to only grab certain key value pairs.

I am sorry but you have to be more specific. Why are you trying to sort it? What JSON data are you trying to sort–does it follow a specific format? How do you set what? etc. What are you trying to accomplish?


conorcan Purchased

Hi Zuires,

I am having an issue with removing items from a list on Firefox(no issues on Chrome). I notice that the onItemRemoved event handler doesn’t seem to be triggered.

The console error is: ReferenceError: event is not defined It points to line number 1022 of the unminified javascript file.

Please let me know if you’d like any more details, or for me to help debugging on my side, I know a bit of web development but I’m unfamiliar with this code. Thank you :)

Thanks for bringing this to my attention. I will look into it and if the problem is reproducible then I will release a patch for it this week. Otherwise, I will get back to you for more information.


conorcan Purchased

Great, thanks zuires