Results 1 to 2 of 2

Thread: Dragging and dropping

  1. #1
    Join Date
    Nov 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dragging and dropping

    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[i].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>

  2. #2
    Join Date
    Apr 2006
    Posts
    429
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    like this and this?
    Please don't mind me. I am just posting a lot of nonsense.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •