J
Jungleman
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<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>
</head>
<body bgcolor="#ffffff">
<table cellpadding="6">
<tr>
<td>
<div id="comment" style="position:relative;">
<b>Drag the image with your mouse to move it around the screen.</b>
</div>
</td>
</tr>
<td>
<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>
<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">
</div>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
SET_DHTML(CURSOR_MOVE, RESIZABLE, "image1", "image2",
"comment"+NO_DRAG);
for (var i = 0; i < dd.elements.length; i++)
{
dd.elements.hide();
}
// images should not be visible initially
//-->
</script>
<div id="content">
<div id="cart" class="cart">
<div id="items">
<div>
<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',
{revert:true})</script>
</div>
</div>
<div style="clear:both;"></div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="wastebin">
Drop a panel here to remove it.
</div>
<div style="height:40px;padding-top:10px;">
<p id="indicator" style="display:none;margin-top:0px;">
<img alt="Indicator" src="indicator.gif" /> Updating Autolayout...
</p>
</div>
<script type="text/javascript">
Droppables.add('wastebin', {accept:'cart-items',
onDrop:function(element){Element.hide(element); new
Ajax.Updater('items', '/shop/remove',
{onLoading:function(request){Element.show('indicator')},
onComplete:function(request){Element.hide('indicator')},
parameters:'id=' + encodeURIComponent(element.id), evalScripts:true,
asynchronous:true})}, hoverclass:'wastebin-active'})</script>
</body>
</html>
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<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>
</head>
<body bgcolor="#ffffff">
<table cellpadding="6">
<tr>
<td>
<div id="comment" style="position:relative;">
<b>Drag the image with your mouse to move it around the screen.</b>
</div>
</td>
</tr>
<td>
<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>
<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">
</div>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
SET_DHTML(CURSOR_MOVE, RESIZABLE, "image1", "image2",
"comment"+NO_DRAG);
for (var i = 0; i < dd.elements.length; i++)
{
dd.elements.hide();
}
// images should not be visible initially
//-->
</script>
<div id="content">
<div id="cart" class="cart">
<div id="items">
<div>
<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',
{revert:true})</script>
</div>
</div>
<div style="clear:both;"></div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="wastebin">
Drop a panel here to remove it.
</div>
<div style="height:40px;padding-top:10px;">
<p id="indicator" style="display:none;margin-top:0px;">
<img alt="Indicator" src="indicator.gif" /> Updating Autolayout...
</p>
</div>
<script type="text/javascript">
Droppables.add('wastebin', {accept:'cart-items',
onDrop:function(element){Element.hide(element); new
Ajax.Updater('items', '/shop/remove',
{onLoading:function(request){Element.show('indicator')},
onComplete:function(request){Element.hide('indicator')},
parameters:'id=' + encodeURIComponent(element.id), evalScripts:true,
asynchronous:true})}, hoverclass:'wastebin-active'})</script>
</body>
</html>