Maybe this is what you're looking for. Drag an item from the second
column to the first.
<table border="1" cellpadding="5">
<tr>
<td valign="top">
<ul id='fList'>
<li>Apples</li>
<li>Grapes</li>
<li>Strawberries</li>
</ul>
</td>
<td valign="top">
<div id='fish' class='meat'>Fish</div>
<div id='chicken' class='meat'>Chicken</div>
</td>
</tr>
</table>
<script type="text/javascript">
Sortable.create("fList", {constraint:false})
new Draggable('fish',{revert:true})
new Draggable('chicken',{revert:true})
Droppables.add('fList',{accept:'meat',onDrop:function
(dragName,dropName){placeFood(dragName,dropName)}})
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
}
function placeFood(dragName,dropName) {
myPos = findPos($(dropName))
//alert(myPos[0]+", "+myPos[1])
$("fList").insert(new Element("li", { id: $(dragName).id+"_" }))
$($(dragName).id+"_").innerHTML = $(dragName).innerHTML
Sortable.destroy("fList")
Sortable.create("fList", {constraint:false})
}
</script>
On Jan 22, 2:02 pm, Walter Lee Davis <[email protected]> wrote:
> I have a sortable div thus:
>
> Sortable.create('timeline',{tag:'div', overlap:'horizontal',
> constraint:false, scroll:window, dropOnEmpty:true});
>
> div#timeline is contained within a larger div#drop which is droppable.
>
> <div id="drop">
> <p>A lovely caption explaining the DnD behavior</p>
> <div id="timeline">
> </div>
> </div>
>
> I then have a bunch of elements of class clip or class photo which are
> individually set to be draggable. When I drag a clip or a photo onto
> div#drop, an onDrop function inserts a clone of the dropped object
> into div#timeline.
>
> At this point, if I run Sortable.create again, these dropped items
> become sortable. But if I do that, I run into other issues later that
> I'm having trouble overcoming.
>
> So my question is this: Is it possible to add elements to a Sortable
> by any means other than physically dragging and dropping without re-
> running the create method afterward? I've looked through the script
> and can't see a function that adds the dragged element into it. I've
> been using $('timeline').insert(clonedElement), and while it does put
> the element into the div, the result is not sortable.
>
> Thanks in advance,
>
> 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
-~----------~----~----~----~------~----~------~--~---
