Does it have anything to do with auto Idi-ing? I mean if you have sortable and you change the order of items, that will auto change the Id's to the necessary ones. And so if you drag and item and on the drop (without ghosting=true) drop between item 2 and 3, that will change the droppable items id to 3, and all others after original 2 plus 1.
On May 5, 7:10 pm, Walter Lee Davis <[email protected]> wrote: > On May 5, 2009, at 12:54 PM, WLQ wrote: > > > Well that's what I've done already, but how to clone an item, and at > > the same time change it ID to the necessary one. That's what's the > > question. > > > On May 4, 4:27 pm, Walter Lee Davis <[email protected]> wrote: > >> What I would do is get the new ID from the database on drop. So you > >> would create your list of "prototype" widgets that you drag from, > >> then > >> make a Sortable list to drag into. Set the first list to be Draggable > >> with revert: true and ghosting:true, then add an onDrop method to the > >> Sortable list. > > Here's a snip of what I'm doing here: > > // #cart is a div wrapped around #timeline, > // it snags the drop event and then we add a clone of > // the dragged element into #timeline and re-initialize #timeline > // to resuscitate the Sortable. > > Droppables.add("cart", { > greedy:false, > accept:['box','photo'], > onHover:function(element){ > $('cart').addClassName('cart-active'); > }, > onDrop:function(element){ > var id = element.id.replace(/[^\d]/g,''); > var contents = '<p class="remove"><img > src="icns/delete_gray.png" > class="remove" width="16" height="16" alt="[x]" /></p>' + > element.innerHTML + '<p class="details"><img src="icns/gear.png" > class="details" width="16" height="16" alt="(i)" /></p>'; > var d = new > Element('div',{'class':'clone'}).update(contents); > $('timeline').insert(d); > new > Ajax.Request('/widgets/create',{onComplete:function(transport){ > d.id = 'clone_' + transport.responseText; > }}); > $('cart').removeClassName('cart-active'); > Sortable.create('timeline', > {tag:'div',overlap:'horizontal',constraint:false, > scroll:window,dropOnEmpty:true, onUpdate:function(elm){$ > ('cart').removeClassName('cart-active');}}); > } > }) > > There may be some copy-and-paste errors above, but it should give you > the basic idea. (I tried to strip out as much of the locally-specific > stuff so it might be less bound to my situation here.) > > Walter --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
