abhijeet P 0 Newbie Poster

Hello all,

I am new to both HTML and CSS
i am using a code where u can drag and drop elements from left into the grid.
i want to put the images in the left with same effect as the one where I am dropping the image.

Also on dragging i want the dragged image to dissappear and on clicking 'x' on dragged image the image to reappear on the left plz help....

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>enter</title>
    <script type="text/javascript" src="../js/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.9.custom.min.js"></script>
    <style type="text/css">
        body {
            font-family: Arial, "Free Sans";
            margin: 0;
            padding: 0;
        }
        #main {
            background: #0099cc;
            margin-top: 0;
            padding: 2px 0 4px 0;
            text-align: center;
        }
        #main a {
            color: #ffffff;
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
            font-family: Arial;
        }
        #main a:hover {
            text-decoration: underline;
           
        }
       
        #item_container{ 
            width: 610px;
            height:220px;
            margin: 0 auto;
            margin-top: 90px;
            margin-bottom: 10px;
            float: left;
            margin-left: 30px;
           
            
        }
        .item {
            background: #fff;
            float: left;
            padding: 5px;
            margin: 5px;
            cursor: move;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            z-index: 5;
        }
        .title, .price {
            display: block;
            text-align: center;
            font-size: 14px;
            letter-spacing: -1px;
            font-weight: bold;
            cursor: move;
        }
        .title {
            color: #333;
        }
        .price {
            color: #0099cc;
            margin-top: 5px;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
        }
        .icart, .icart label {
            cursor: e-resize;
        }
        .divrm {
            text-align: right;
        }
        .remove {
            text-decoration: none;
            cursor: pointer;
            font-weight: bold;
            font-size: 20px;
            position: relative;
            top: -7px;
        }
        .remove:hover {
            color: #999;
        }
        .clear {
            clear: both;
        }
        #cart_container {
            margin: 0 auto;
            width: 495px;
            float: right;
            margin-right: 100px;
            margin-top: 400px;
            margin-bottom: 20px;
        }
        #cart_title span {
            border: 8px solid #666;
            border-bottom-width: 0;
            background: #333;
            display: block;
            float: left;
            color: #fff;
            font-size: 11px;
            font-weight: bold;
            padding: 5px 10px;
            -webkit-border-radius: .5em .5em 0 0;
            -moz-border-radius: .5em .5em 0 0;
            border-radius: .5em .5em 0 0;
        }
        #cart_toolbar {
            overflow: hidden;
            border: 8px solid #666;
            height: 190px;
            z-index: -2;
            width: 483px;
            -webkit-border-radius: 0 .5em 0 0;
            -moz-border-radius: 0 .5em 0 0;
            border-radius: 0 .5em 0 0;
            background: #ffffff;
        }
        #cart_items {
            height: 190px;
            width: 483px;
            position: relative;
            padding: 0 0 0 2px;
            z-index: 0;
            cursor: e-resize;
            border-width: 0 2px;
        }
        .back {
            background: #e9e9e9;
        }
        #navigate {
            width: 463px;
            margin: 0 auto;
            border: 8px solid #666;
            border-top-width: 0;
            -webkit-border-radius: 0 0 .5em .5em;
            -moz-border-radius: 0 0 .5em .5em;
            border-radius: 0 0 .5em .5em;
            padding: 10px;
            font-size: 14px;
            background: #333;
            font-weight: bold;
        }
        #nav_left {
            float: left;
        }
        #nav_left a {
            padding: 4px 8px;
            background: #fff;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            text-decoration: none;
            color:#0099cc;
        }
        #nav_left a:hover {
            background: #666;
            color: #fff;
        }
        #nav_right {
            float: right;
        }
        .sptext {
            background: #ffffff;
            padding: 4px 8px;
            margin-left: 8px;            
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            color: #666;
        }
        .count {
            color: #0099cc;
        }
        .drop-active {
            background: #ffff99;
        }
        .drop-hover {
            background: #ffff66;
        }
    </style>
    <script type="text/javascript">
    var total_items = 0;
    var total_price = 0;
    $(document).ready(function() {

        $(".item").draggable({
        	
        		revert: true   
            
        });
        $("#cart_items").draggable({
            axis: "x"
        });

        $("#cart_items").droppable({
            accept: ".item",
            activeClass: "drop-active",
            hoverClass: "drop-hover",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">';
                html = html + '<div class="divrm">';
                html = html + '<a onclick="remove(this)" class="remove '+itemid+'">&times;</a>';
                html = html + '<div/>'+item+'</div>';
                $("#cart_items").append(html);

                // update total items
                total_items++;
                $("#citem").html(total_items);

                // update total price
                var price = parseInt(ui.draggable.find(".price").html().replace("$ ", ""));
                total_price = total_price + price;
                $("#cprice").html("$ " + total_price);

                // expand cart items
                if (total_items > 4) {
                    $("#cart_items").animate({width: "+=120"}, 'slow');
                }
            }
        });
       

        $("#btn_next").click(function() {
            $("#cart_items").animate({left: "-=100"}, 100);
            return false;
        });
        $("#btn_prev").click(function() {
            $("#cart_items").animate({left: "+=100"}, 100);
            return false;
        });
        $("#btn_clear").click(function() {
            $("#cart_items").fadeOut("2000", function() {
               $(this).html("").fadeIn("fast").css({left: 0});
            });
            $("#citem").html("0");
            $("#cprice").html("$ 0");
            total_items = 0;
            total_price = 0;
            return false;
        });
    });
    function remove(el) {
        $(el).hide();
        $(el).parent().parent().effect("highlight", {color: "#ff0000"}, 1000);
        $(el).parent().parent().fadeOut('1000');
        setTimeout(function() {
            $(el).parent().parent().remove();
            // collapse cart items
            if (total_items > 3) {
                $("#cart_items").animate({width: "-=120"}, 'slow');
            }
        }, 1100);

        // update total item
        total_items--;
        $("#citem").html(total_items);

        // update totl price
        var price = parseInt($(el).parent().parent().find(".price").html().replace("$ ", ""));
        total_price = total_price - price;
        $("#cprice").html("$ " + total_price);
    }
    /* $(function() {
        $(".i").draggable({ helper: 'clone' });
        $("#dropArea").droppable({
                    drop: function(event, ui) {
                            //ui.draggable.appendTo(this);
                            $(this).append(ui.draggable);
                    }
            });
    }); */
    </script>
  </head>
  <body>
      <div id="main">
          <a href="#">link</a>
          &nbsp;&nbsp;&nbsp;
          <a href="">link</a>
          &nbsp;&nbsp;&nbsp;
          <!-- <a href="">Download Source</a>
          &nbsp; -->
      </div>
      <div id="item_container">
          <div class="item" id="i1">
              <img src="images/img" width="50" height="50"/>
              <label class="title">xyz</label>
              <label class="price">1234567</label>
          </div>
          <div class="item" id="i2">
              <img src="images/img.jpg" width="50" height="50"/>
              <label class="title">xyz</label>
              <label class="price">2345678</label>
          </div>
          <div class="item" id="i3">
              <img src="images/img.png" width="50" height="50"/>
              <label class="title">zyz</label>
              <label class="price">12345676</label>
          </div>
          <!-- <div class="item" id="i4">
              <img src="img/4.jpg"/>
              <label class="title">T-Shirt 4</label>
              <label class="price">$ 30</label>
          </div>
          <div class="item" id="i5">
              <img src="img/5.jpg"/>
              <label class="title">T-Shirt 5</label>
              <label class="price">$ 28</label>
          </div>
          <div class="item" id="i6">
              <img src="img/6.jpg"/>
              <label class="title">T-Shirt 6</label>
              <label class="price">$ 26</label>
          </div>
          <div class="item" id="i7">
              <img src="img/7.jpg"/>
              <label class="title">T-Shirt 7</label>
              <label class="price">$ 35</label>
          </div>
          <div class="item" id="i8">
              <img src="img/8.jpg"/>
              <label class="title">T-Shirt 8</label>
              <label class="price">$ 33</label>
          </div>
          <div class="item" id="i9">
              <img src="img/9.jpg"/>
              <label class="title">T-Shirt 1</label>
              <label class="price">$ 12</label>
          </div>
          <div class="item" id="i10">
              <img src="img/10.jpg"/>
              <label class="title">T-Shirt 10</label>
              <label class="price">$ 22</label>
          </div> -->
          <div class="clear"></div>
      </div>
      <div id="cart_container">
          <div id="cart_title">
              <span>Your item</span>
              <div class="clear"></div>
          </div>
          <div id="cart_toolbar">
              <div id="cart_items" class="back"></div>
          </div>
          <div id="navigate">
              <div id="nav_left">
                  <a href="" id="btn_prev"><</a>
                  <a href="" id="btn_next">></a>
                  <a href="" id="btn_clear">Clear item</a>
              </div>
              <div id="nav_right">
                  <span class="sptext">
                      <label>item </label><label class="count" id="citem">0</label>
                  </span>
                  <span class="sptext">
                      <!-- <label>Price </label><label class="count" id="cprice">$ 0</label> -->
                  </span>
              </div>
              <div class="clear"></div>
          </div>
      </div>
  </body>
</html>

here is the code