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
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@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@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
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@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@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@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
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@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@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@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@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- Louis LaBrunda Keystone Software Corp. SkypeMe callto://PhotonDemon
seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside@lists.squeakfoundation.org