This should get you started (requires scriptaculous)
<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>
<input type=button onclick="getList()" value ="get list">
<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})
}
function getList() {
var myList = ''
$('fList').select('li').each(function(element) {
myList = myList + $(element).innerHTML + "|"
})
alert(myList)
}
</script>
On Mar 10, 10:20 am, Harleycoder <[email protected]> wrote:
> Hi
> I am wondering how to make a drag and drop function actually pass
> values - I'm trying to build a photo gallery function where you have a
> bunch of photos you've uploaded and you are going to drag them to a
> (box) that represents a certain photo gallery.
>
> I'm a php coder and while I've used JavaScript for years, I've never
> actually written any from scratch; just changed existing code, made it
> dynamic, etc.
>
> Hope someone can help me make some magic...I've seen this in action
> but don't have the source code!
>
> Best,
> MJ
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
