Diferència entre revisions de la pàgina «Sol draggable papelera»

De wikiserver
Dreceres ràpides: navegació, cerca
(Es crea la pàgina amb «<source lang="java"> <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script …».)
 
Línia 1: Línia 1:
 
<source lang="java">
 
<source lang="java">
 
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
Línia 14: Línia 13:
 
                         $("#posx").text(ui.position.left);
 
                         $("#posx").text(ui.position.left);
 
                         $("#posy").text(ui.position.top);
 
                         $("#posy").text(ui.position.top);
                         if (ui.position.left > 580 && ui.position.top > 300) {
+
                         if (ui.position.left > 540 && ui.position.top > 100) {
 
                             $(this).remove()
 
                             $(this).remove()
 
                         }
 
                         }
Línia 23: Línia 22:
 
         </script>
 
         </script>
 
         <style>
 
         <style>
            .main {
 
                position: absolute;
 
                top:0px;
 
                left:0px;
 
            }
 
 
              
 
              
 
             img{
 
             img{
Línia 43: Línia 37:
 
         <div id="posx"></div>
 
         <div id="posx"></div>
 
         <div id="posy"></div>
 
         <div id="posy"></div>
         <img src="http://images.gofreedownload.net/system-recycle-bin-empty-30789.jpg" alt="papelera" width="150px"/>
+
         <img src="http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211767295.png" alt="papelera" width="150px"/>
  
  

Revisió del 16:39, 2 abr 2016

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script>
            $(document).ready(function () {
                // var ventana_ancho = $(window).width();
                //  var ventana_alto = $(window).height();
                $('p').draggable({
                    drag: function (event, ui) {
                        $("#posx").text(ui.position.left);
                        $("#posy").text(ui.position.top);
                        if (ui.position.left > 540 && ui.position.top > 100) {
                            $(this).remove()
                        }
                        ;
                    }
                })
            });
        </script>
        <style>
            
            img{
                position: absolute;
                top:400px;
                left:500px;
            }
        </style>
    </head>
    <body>

        <p>TEXTO 1.</p>
        <p>TEXTO 2.</p>
        <p>TEXTO 3.</p>
        <div id="posx"></div>
        <div id="posy"></div>
        <img src="http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211767295.png" alt="papelera" width="150px"/>


    </body>
</html>