[Seaside] jQueryUI Drago & Drop

[Johan Brichau]

Hi Antoine,

To use the #callbackDroppable method, you need a later version of Seaside. Just upgrade your a5 to the latest version.

For more info, you can search the seaside mailinglist for the discussion with subject 'JQDroppable convience method' in october 2009. The #callbackDroppable method was added by Lukas following that discussion. 

In your code, the following will never work because an ajax callback expects no arguments.

> html jQuery ajax callback:
>                 [ :event | self selected add: (event at: #draggable)  ]

If, for some reason, the #callbackDroppable: method also is not very convenient for you, you might do something along the lines of:

callback: [:value | draggedObject := (self renderContext callbacks passengerAt: value)]
value: (JSStream on: '$(ui.draggable).get(0).id'))  asFunction: #(event ui))

Which will pass the id of the draggable to your callback in Smalltalk, from where you can get it out of the passengers registry.

Hope this helps,
Johan

On 22 Apr 2010, at 23:16, Antoine Cervoise wrote:

> Hi,
> 
> I'm using Seaside 3.0a5 and I've importe jQuery and jQueryUI
> 
> I'm trying to do a drag & drop effect like here : http://demo.seaside.st/javascript/jquery-ui/droppableinteraction   but there is some information missing. I can move my elements, I detect when there are on the draggable zone but I don't find the method for adding my element wich I am dropping in the draggable zone. On seaside website they use a callbackDroppable method but I do not have it.
> 
> I'm doing this :
> 
> WAComponent subclass: #Test2
>     instanceVariableNames: 'selected'
>     classVariableNames: ''
>     poolDictionaries: ''
>     category: 'visuel'
> 
> Test2>>renderContentOn: html
>     self dragzone:html .
>     self dropzone:html.
> 
> Test2>>dragzone: html
>     | maListe |
>     maListe := Set new .
>     maListe add: Composant new . "here Composant is juste a string"
>      html div class: 'inventory ui-corner-all drag'; with: [ maListe do: [ :each | html div
>          with: each] ] .
> 
> Test2>>dropzone: html
> html div
>       class: 'ui-droppable ui-corner-all drop';
>     script: (html jQuery new droppable
>          onDrop: (html jQuery ajax callback:
>                                             [ :event | self selected add: (event at: #draggable)  ] ;
>                                         html: [ :r | self renderSelectedItemsOn: r ]));
>       with: [ self renderSelectedItemsOn: html ]
> 
> Test2>>renderSelectedItemsOn: html
>      self selected do: [ :each |
>       html div
>          class: each;
>          passenger: each;
>          script: (html jQuery new draggable
>             onStop: (html jQuery this effect
>                percent: 1; puff;
>                onComplete: (html jQuery this parent load html: [ :r |
>                   self selected remove: each ifAbsent: [ ].
>                   self renderSelectedItemsOn: r ]))) ]
> 
> Test2>>initialize
>     super initialize.
>     self selected: Set new
> 
> If someone can help me with the drroppablezone method. I tryed a lots of things, I searched on the Internet, on the source code but I didn't find anything. 
> 
> A. Cervoise
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

----------------------------
Johan Brichau
johan.brichau at uclouvain.be