Maison > Article > interface Web > Comment implémenter l'effet glisser-déposer jquery
Comment implémenter l'effet glisser-déposer jquery
- php中世界最好的语言original
- 2018-04-24 11:17:461818parcourir
Cette fois, je vais vous expliquer comment implémenter l'effet glisser-déposer jquery. Quelles sont les précautions pour implémenter l'effet glisser-déposer jquery. Ce qui suit est un cas pratique, jetons un coup d'œil.
La capture d'écran de l'effet en cours d'exécution est la suivante :
Cliquez ici pour voir l'effet de démonstration en ligne.
Le code spécifique est le suivant :
partie html :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="tuo.js"></script>
<script type="text/javascript">
$(function(){
$("#box").tuoz();
})
</script>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#box{
height:100px;
width:100px;
background:#666666;
}
#box img{
height:50px;
width:50px;
background:#666666;
}
#big{
height:400px;
width:300px;
background:purple;
}
</style>
</head>
<body>
<p id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"></img></p>
<p id="big"></p>
</body>
</html>
partie jquery :
(function(){
$.fn.extend({
tuoz:function(){
return this.each(function(){
var $this=$(this);
var ey="";
var ex="";
var mx="";
var my="";
var tx="";
var ty="";
var small_x="";
var small_y="";
var big_height="";
var big_width="";
var big_x="";
var big_y="";
var move="false";
$this.mousedown(function(e){
move="true";
mx=$this.offset().left;
my=$this.offset().top;
ex=e.clientX;
ey=e.clientY;
tx=ex-mx;
ty=ey-my;
small_x=$("#big").offset().left;
small_y=$("#big").offset().top;
big_height=$("#big").height();
big_width=$("#big").width();
big_x=small_x+big_width;
big_y=small_y+big_height;
})
$(document).mousemove(function(e){
ex=e.clientX;
ey=e.clientY;
if(move=="true"){
$this.offset({left:ex-tx,top:ey-ty});
}
})
$this.mouseup(function(e){
move=false;
ex=e.clientX;
ey=e.clientY;
if(ex>=small_x && ey>=small_y && ex<=big_x && ey<=big_y){
$("#big").append($this.html());
}
$this.offset({left:mx,top:my});
})
})
}
})
})(jQuery)
Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article , pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
jQuery implémente la fonction d'agrandissement des images lorsque la souris passe dessus
jQuery implémente la commutation coulissante d'image (avec code)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!