Forums

C5-8.3: How to add a mouse draggable for sorting?

Permalink
I am printing a list of <div>'s in a block's Add Block Form. What's the way:

1. to make them draggable with a mouse so that I can change the order manually? (not just making them move around anywhere on the screen, but so that they drop in the list after moving, the same way as in the editing the Page Types - Edit Form)
2. to have the manually sorted list of div's saved on clicking the form's Save button?

Thank you.
linuxoid
 
linuxoid replied on at Permalink Reply
linuxoid
I found there's a sortable widget in jQueryUI:
http://jqueryui.com/sortable/

So, following that example basically works but there are 2 problems I can't find how to resolve:

1. The up-down arrows are not displayed
2. I can't change the background-color of the drop placeholder

The problem seems to be C5 specific because if I create an html file copying that code, it all works fine, the arrows are shown, the background is colored.

The assets are loaded with:
public function registerViewAssets($outputContent = '')
    {
        $this->requireAsset('javascript', 'jquery');
        $this->requireAsset('javascript', 'jquery/ui');
        $this->requireAsset('css', 'jquery/ui');
    }


What's the problem here with C5?
Gondwana replied on at Permalink Reply
Gondwana
I don't know the answer but I can relate to the question! I also have a need for this kind of capability. Something like what you can do with files in file sets in the File Manager would be ideal.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi linuxoid,

Here are 2 examples of jQuery UI sortable use in the core:
https://github.com/concrete5/concrete5/blob/develop/concrete/blocks/...
https://github.com/concrete5/concrete5/blob/develop/concrete/blocks/...

While in edit mode, jQuery UI is loaded by the concrete5 interface, so you do not need to require the asset.