This article will introduce the effect of jQuery imitation drag image deletion to the recycle bin. For more information, see.
The Code is as follows: |
Copy code |
<Head> <Title> </title> <Style type = "text/css"> # Mydiv { Width: 900px; Background-color: #444; Position: absolute; Left: 100px; } Img { Width: 200px; Height: 200px; } Ul { List-style-type: none; Height: 200px; } Ul li { Display: inline; } </Style> <Script src = "js/Jquery1.7.js" type = "text/javascript"> </script> <Script src = "js/jquery. ui. core. js" type = "text/javascript"> </script> <Script src = "js/jquery. ui. widget. js" type = "text/javascript"> </script> <Script src = "js/jquery. ui. mouse. js" type = "text/javascript"> </script> <Script src = "js/jquery. ui. draggable. js" type = "text/javascript"> </script> <Script type = "text/javascript"> $ (Function (){ // Stores the initial coordinates of the dragged image. Var startleft = 0; Var starttop = 0; $ ('Img '). draggable ({ Start: function (){ // Set the initial coordinates of the dragged image for the two variables Startleft = $ (this). offset (). left; Starttop = $ (this). offset (). top; }, Stop: function (){ If ($ (this ). offset (). left> $ ('# mydiv '). offset (). left + $ ('# mydiv '). width () | $ (this ). offset (). top> $ ('# mydiv '). offset (). top + $ ('# mydiv '). height ()){ $ (This). remove (); } Else { // Reset $ (This). offset ({ Left: startleft, Top: starttop }) } } }); }) </Script> </Head> <Body> <Div id = "mydiv"> <Ul> <Li> </li> <Li> </li> <Li> </li> <Li> </li> </Ul> </Div> </Body> |