Añadir imagenes o objetos

nataliagb1992 · #1 (**permalink**) 03/07/2013, 00:56

Buenos dias,
necesito hacer una aplicacion en la que al darle a una imagen esta se clone y la pueda mover por una ventanita.
Hasta el momento solo e logrado tener una imagen añadirla a un cuadro y que no se salga de ella , una vez la imagen en el cuadro la puedo mover dentro de el. Pues bien necesito que la imagen se copie y sea la que ponga dentro del cuadro pero que pueda seguir añadirendo imagenes cada vez que le de a un boton o a algo. No se si me entendeis bn , me gustaria acer una aplicacion tipo packet tracer. o algo asi.
Gracias

nataliagb1992 · #2 (**permalink**) 03/07/2013, 01:10

Mas o menos lo que quiero hacer es una cosa así pero con imagenes en vez de textos
http://jqueryui.com/droppable/#shopping-cart

Triby · #3 (**permalink**) 03/07/2013, 01:17

http://jqueryui.com/droppable/#photo-manager

Sería algo como eso?... qué raro que no lo viste, estando ahí mismo.

nataliagb1992 · #4 (**permalink**) 03/07/2013, 01:24

Noo por que ese no hace copia sino que lo incluye directamente

yo quiero que haga una copia o una clonacion y lo ponga en el otro lado pero que pueda seguir añadiendo si necesito mas .
Mira una cosa asi

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>ç
        <link rel="stylesheet" href="css/estilo.css" />
 
    </head>
    <body>
        <img src="images/a-1.png"  class="icon"/>
        <b>Hello</b><p>, how are you?</p>
        <script>
       
            function agregar(){  
            $("img").clone().appendTo("p");
        }
        </script>
 
        <button onclick="agregar()">Agregar</button>
    </body>
    
</html>

el problema de esto es que me va clonando por ejemeplo si hay 1 me clona 1 si hay dos me clona dos y va aumentando en su doble, es decir la siguiente vez me clona 4 y luego 8 ....
y necesito que yo tenga mi imagen la seleccione le de a agregar o directamente dandole a la imagen me haga una copia y yo la pueda mover y demas
Gracias

nataliagb1992 · #5 (**permalink**) 03/07/2013, 02:11

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<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Droppable - Shopping Cart Demo</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel='stylesheet' type='text/css' media='screen' href='jquery/css/ui-ligtness/jquery-ui-1.10.3.custom.css' />
        <link rel='stylesheet' type='text/css' media='screen' href='jquery/css/ui-ligtness/jquery-ui-1.10.3.custom.min.css' />
        <link rel='stylesheet' type='text/css' media='screen' href='css/estilo.css' />
        <script type="text/javascript" src="jquery/js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="jquery/js/jquery-ui-1.10.3.custom.js"></script>
        <script type="text/javascript" src="jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
        <link rel="stylesheet" href="css/estilo.css" />
        <style>
            h1 { padding: .2em; margin: 0; }
            #products { float:left; width: 120px; margin-right: 2em; font-family: verdana; font-size: 10px;}
            #cart { width: 200px; float: left; margin-top: 1em; }
            /* style the list to maximize the droppable hitarea */
            #cart ol { margin: 0; padding: 1em 0 1em 3em; }
            #cuerpo { position: relative; top: -5px; left: 10px; width: 950px; height: 750px; padding: 0.5em; float: left; margin: 10px; z-index: 1000; }
            #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;}
 
        </style>
        <script>
            $(function() {
                $( "#catalog" ).accordion();                     
                $( "#catalog img" ).draggable({
                    appendTo: "body",
                    helper: "clone",
                    revert: "invalid"
                });
                $( "#cuerpo" ).droppable({
                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    accept: ":not(.ui-sortable-helper)",
                    drop: function( event, ui ) {
                        // $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
                       
                        $("img").clone(true).appendTo(this);
                    }
                })
            });
        </script>
    </head>
    <body>
 
        <div id="products">
            <h1 class="ui-widget-header">Products</h1>
            <div id="catalog">
                <h2><a href="#">T-Shirts</a></h2>
                <div>                        
                    <img src="images/a-1.png" class="icon" id="bluetooth"/>                   
                    <img src="images/c-1.png" class="icon" id="internetDevice"/>                   
                    <img src="images/d-1.png" class="icon" id="monitor"/>                   
                    <img src="images/b-1.png" class="icon" id="ethernet" />             
                </div>
                <h2><a href="#">Bags</a></h2>
                <div>                  
                    <img src="images/e-1.png" class="icon" id="antena"/>                 
                    <img src="images/f-1.png" class="icon" id="server"/>                   
                    <img src="images/g-1.png" class="icon" id="signal"/>                  
                </div>
                <h2><a href="#">Gadgets</a></h2>
                <div>
                    <img src="images/h-1.png" class="icon" id="modem"/>                    
                    <img src="images/i-1.png" class="icon" id="equipo"/>
                </div>
            </div>
        </div>
    <center>
        <div id="cuerpo" class="ui-widget-content">
 
        </div>  
    </center>
</body>
</html>