Tema: Añadir imagenes o objetos
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 03/07/2013, 02:11
nataliagb1992
 
Fecha de Ingreso: septiembre-2012
Ubicación: Sevilla
Mensajes: 144
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Añadir imagenes o objetos
En principio ya esta casi solucionado mi problema pero como siempre surge otro nuevo

--Al añadir las imagenes se añaden todas ya que le paso el parametro -img- , me gustaria saber una forma para distinguir cual es la imagen señalada

Código HTML: 
Ver original
  1. <html lang="en">
  2.     <head>
  3.         <meta charset="utf-8" />
  4.         <title>jQuery UI Droppable - Shopping Cart Demo</title>
  5.         <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  6.         <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  7.         <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  8.         <link rel="stylesheet" href="/resources/demos/style.css" />
  9.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10.         <link rel='stylesheet' type='text/css' media='screen' href='jquery/css/ui-ligtness/jquery-ui-1.10.3.custom.css' />
  11.         <link rel='stylesheet' type='text/css' media='screen' href='jquery/css/ui-ligtness/jquery-ui-1.10.3.custom.min.css' />
  12.         <link rel='stylesheet' type='text/css' media='screen' href='css/estilo.css' />
  13.         <script type="text/javascript" src="jquery/js/jquery-1.9.1.js"></script>
  14.         <script type="text/javascript" src="jquery/js/jquery-ui-1.10.3.custom.js"></script>
  15.         <script type="text/javascript" src="jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
  16.         <link rel="stylesheet" href="css/estilo.css" />
  17.         <style>
  18.             h1 { padding: .2em; margin: 0; }
  19.             #products { float:left; width: 120px; margin-right: 2em; font-family: verdana; font-size: 10px;}
  20.             #cart { width: 200px; float: left; margin-top: 1em; }
  21.             /* style the list to maximize the droppable hitarea */
  22.             #cart ol { margin: 0; padding: 1em 0 1em 3em; }
  23.             #cuerpo { position: relative; top: -5px; left: 10px; width: 950px; height: 750px; padding: 0.5em; float: left; margin: 10px; z-index: 1000; }
  24.             #bluetooth,#ethernet,#internetDevice,#monitor,#antena,#server,#signal,#modem,#equipo { z-index:9000; width: 70px; height: 80px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 0px;}
  25.  
  26.         </style>
  27.         <script>
  28.             $(function() {
  29.                 $( "#catalog" ).accordion();                     
  30.                 $( "#catalog img" ).draggable({
  31.                     appendTo: "body",
  32.                     helper: "clone",
  33.                     revert: "invalid"
  34.                 });
  35.                 $( "#cuerpo" ).droppable({
  36.                     activeClass: "ui-state-hover",
  37.                     hoverClass: "ui-state-active",
  38.                     accept: ":not(.ui-sortable-helper)",
  39.                     drop: function( event, ui ) {
  40.                         // $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
  41.                        
  42.                         $("img").clone(true).appendTo(this);
  43.                     }
  44.                 })
  45.             });
  46.         </script>
  47.     </head>
  48.     <body>
  49.  
  50.         <div id="products">
  51.             <h1 class="ui-widget-header">Products</h1>
  52.             <div id="catalog">
  53.                 <h2><a href="#">T-Shirts</a></h2>
  54.                 <div>                        
  55.                     <img src="images/a-1.png" class="icon" id="bluetooth"/>                   
  56.                     <img src="images/c-1.png" class="icon" id="internetDevice"/>                   
  57.                     <img src="images/d-1.png" class="icon" id="monitor"/>                   
  58.                     <img src="images/b-1.png" class="icon" id="ethernet" />             
  59.                 </div>
  60.                 <h2><a href="#">Bags</a></h2>
  61.                 <div>                  
  62.                     <img src="images/e-1.png" class="icon" id="antena"/>                 
  63.                     <img src="images/f-1.png" class="icon" id="server"/>                   
  64.                     <img src="images/g-1.png" class="icon" id="signal"/>                  
  65.                 </div>
  66.                 <h2><a href="#">Gadgets</a></h2>
  67.                 <div>
  68.                     <img src="images/h-1.png" class="icon" id="modem"/>                    
  69.                     <img src="images/i-1.png" class="icon" id="equipo"/>
  70.                 </div>
  71.             </div>
  72.         </div>
  73.     <center>
  74.         <div id="cuerpo" class="ui-widget-content">
  75.  
  76.         </div>  
  77.     </center>
  78. </body>
  79. </html>