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

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

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

Louis LaBrunda
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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: how to make a list of items that can be rearranged via drag and drop or buttons

Esteban A. Maringolo
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
<[hidden email]> 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
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

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

Louis LaBrunda
Hi Esteban,

Thank you very much, I will give it a try.

Lou


On Tue, 14 Jul 2020 17:28:23 -0300, Esteban Maringolo <[hidden email]> 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
><[hidden email]> 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
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>_______________________________________________
>seaside mailing list
>[hidden email]
>http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
--
Louis LaBrunda
Keystone Software Corp.
SkypeMe callto://PhotonDemon

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: how to make a list of items that can be rearranged via drag and drop or buttons

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

cheers
Johan

On 15 Jul 2020, at 00:00, Louis LaBrunda <[hidden email]> 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 <[hidden email]> 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
<[hidden email]> 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 <a href="callto://PhotonDemon" class="">callto://PhotonDemon

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
--
Louis LaBrunda
Keystone Software Corp.
SkypeMe <a href="callto://PhotonDemon" class="">callto://PhotonDemon

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside