Here's how to make the drag/drop work. Putting a "clone" of the
dragged item back in the start position depends on how you want your
code to work afterwards. Does the item need to be dragged again?
<style>
.hovering {
background-image:url(Images/something.png);
background-repeat:no-repeat
}
</style>
<div class='draggy' style='width:150px;height:150px;'
id='sampleDrag'><div id='inside'>Drag Me</div></div>
<div id='sampleDrop' style='width:250px;height:250px;border:1px solid
#ff0000'></div>
<script type="text/javascript">
var cloneDIV
new Draggable('sampleDrag',{onDrag:function(){}, onStart:function(){$
('sampleDrag').addClassName('hovering');Element.hide('inside')},
onEnd:function(){$
('sampleDrag').removeClassName('hovering');Element.show('inside');}})
Droppables.add('sampleDrop')
</script>
On Oct 6, 12:41 am, Sloan <[EMAIL PROTECTED]> wrote:
> Hi all,
> I'm new to prototype and script.aculo.us. I'm building an interface
> that will allow a user to drag a "tool" onto a workarea and drop it.
> So far, pretty easy.
> But I need to image/object being dragged to be different from the one
> the user clicked on at the start of the drag. The item the user will
> click on to drag is a small graphic, but they need to be able to drag
> a div containing the result of adding the item (text, input fields,
> etc.)
> Also, when dropped, the new item needs to be added to the droppable,
> and the original graphic needs to be where it was before the
> drag'n'drop.
>
> I've tried using the helper, and replacing the _clone and the
> draggable (the later sort of works) with different HTML. But when it's
> dropped the dropped image stays in place, and the original image
> disappears.
>
> Any suggestions, code examples, etc. would be greatly appreciated!
>
> Thanks!
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
