Diferència entre revisions de la pàgina «Sol draggable papelera»
De wikiserver
(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 …».) |
|||
| (Hi ha una revisió intermèdia del mateix usuari que no es mostren) | |||
| 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 > | + | if (ui.position.left > 540 && ui.position.top > 100) { |
$(this).remove() | $(this).remove() | ||
} | } | ||
| Línia 23: | Línia 22: | ||
</script> | </script> | ||
<style> | <style> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
img{ | img{ | ||
| Línia 33: | Línia 27: | ||
top:400px; | top:400px; | ||
left:500px; | left:500px; | ||
| + | width="150px" | ||
} | } | ||
</style> | </style> | ||
| Línia 43: | Línia 38: | ||
<div id="posx"></div> | <div id="posx"></div> | ||
<div id="posy"></div> | <div id="posy"></div> | ||
| − | <img src="http:// | + | <img src="http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211767295.png" alt="papelera" /> |
Revisió de 16:40, 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;
width="150px"
}
</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" />
</body>
</html>
