[Seaside] how to make a list of items that can be rearranged via drag and drop or buttons

[Johan Brichau]

Check out the examples using jQueryUI.
After loading Seaside in your image, you can find them at http://localhost:8080/javascript/jquery-ui <http://localhost:8080/javascript/jquery-ui>

cheers
Johan

> On 15 Jul 2020, at 00:00, Louis LaBrunda <Lou at Keystone-Software.com> wrote:
> 
> Hi Esteban,
> 
> Thank you very much, I will give it a try.
> 
> Lou
> 
> 
> On Tue, 14 Jul 2020 17:28:23 -0300, Esteban Maringolo <emaringolo at gmail.com> wrote:
> 
>> Hi Louis,
>> 
>> I use jQuery UI sortable() [1] for this. You need to add the
>> JQUiDeploymentLibrary library to your application (or link the to the
>> files).
>> 
>> MyComponent>>renderContentOn: html
>> 
>> html div
>> "snip"
>> script: (self createSortableOn: html)
>> "snip"
>> 
>> MyComponent>>createSortableOn: html
>> 
>> ^(((html jQuery id: self elementId)
>> find: '.' , self containerCssClass , ':first') sortable)
>> placeholder: 'placeholder';
>> handle: '.sort-handle';
>> onStart: ((JSStream on: 'ui.placeholder.height(ui.item.height());')
>> asFunction: #('e' 'ui'));
>> onUpdate: (self createSortableUpdateScriptOn: html);
>> yourself
>> 
>> 
>> MyComponent>>createSortableUpdateScriptOn: html
>> ^html jQuery post
>> callback: [:v | self reorderChildrenWithSequence: (v subStrings:
>> ',')] value: (((html jQuery id: self elementId)
>> find: '.' , self containerCssClass, ':first') call: 'sortable' with:
>> 'toArray')
>> 
>> Each sortable DOM element has an id attribute that is what the
>> sortable("toArray") uses to get the id of each (it is also
>> configurable), then with that collection of IDs look for them in my
>> model:
>> 
>> reorderChildrenWithSequence: anOrderedCollection
>> self children: (anOrderedCollection collect: [:each | self children
>> detect: [:one | one elementId = each]]).
>> self model children: (self children collect: [:each | each model])
>> 
>> Also I use a placeholder while the dragging begins, you can remove the
>> onStart: part if you're not interested in it.
>> 
>> I hope this helps you get started.
>> 
>> Best regards,
>> 
>> [1] https://jqueryui.com/sortable/
>> 
>> ps: My case is a little more complicated as I can sort at arbitrary
>> depth (but only within the same level of depth), but it's a single
>> component that recursively builds a tree of components.
>> You can replace the ((html jQuery id: self elementId) find: '.' , self
>> containerCssClass , ':first') by your jQuery instance.
>> 
>> 
>> Esteban A. Maringolo
>> 
>> 
>> 
>> On Tue, Jul 14, 2020 at 4:50 PM Louis LaBrunda
>> <Lou at keystone-software.com> wrote:
>>> 
>>> Hi All,
>>> 
>>> Can anyone please give me an example of how to make a list of items that can be rearranged via drag and drop or buttons
>>> and the new order retrieved?
>>> 
>>> Lou
>>> --
>>> Louis LaBrunda
>>> Keystone Software Corp.
>>> SkypeMe callto://PhotonDemon
>>> 
>>> _______________________________________________
>>> seaside mailing list
>>> seaside at lists.squeakfoundation.org
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> -- 
> Louis LaBrunda
> Keystone Software Corp.
> SkypeMe callto://PhotonDemon
> 
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20200715/2bf6a243/attachment.html>