View Full Version : Dragging and dropping

07-17-2006, 07:25 PM
Please can someone help?

What I am trying to do is to get an image that is called by one script
to be actionable by another. The images are initialized in one <div>
and the trash function is another <div> How can I get the intialized
images draggable into the trash? I need to fix this for a client, so
any help would be great.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html;
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<title> Test layout</title>
<link href="css/autolay.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/effects.js"></script>
<script type="text/javascript" src="scripts/dragdrop.js"></script>
<script type="text/javascript" src="scripts/wz_dragdrop.js"></script>

<body bgcolor="#ffffff">

<table cellpadding="6">

<div id="comment" style="position:relative;">
<b>Drag the image with your mouse to move it around the screen.</b>
<div id="image1" style="position:absolute; left:10; top:60;">
<img name="image1" src="images/image1.jpg" width="279" height="225"
alt="" title="Image 1">
<div id="panel2" style="position:absolute; left:30; top:80;">
<img name="image2" src="images/image2.jpg" width="279" height="225"
alt="" title="Image 2">
<script type="text/javascript">

for (var i = 0; i < dd.elements.length; i++)

// images should not be visible initially


<div id="content">
<div id="cart" class="cart">
<div id="items">


<img alt="panel1" class="cart-items" id="item_1_0"
src="images/image1.jpg" width="279" height="144"
style="position:relative;" />
<script type="text/javascript">new Draggable('item_1_0',


<div style="clear:both;"></div>
<div id="wastebin">
Drop a panel here to remove it.

<div style="height:40px;padding-top:10px;">
<p id="indicator" style="display:none;margin-top:0px;">
<img alt="Indicator" src="indicator.gif" /> Updating Autolayout...

<script type="text/javascript">
Droppables.add('wastebin', {accept:'cart-items',
onDrop:function(element){Element.hide(element); new
Ajax.Updater('items', '/shop/remove',
parameters:'id=' + encodeURIComponent(element.id), evalScripts:true,
asynchronous:true})}, hoverclass:'wastebin-active'})</script>


07-17-2006, 08:10 PM
like this (http://demo.script.aculo.us/shop) and this (http://www.walterzorn.com/dragdrop/demos/frameset/frame.htm)? :p