Exemple complet d'effet glisser-déposer jquery (avec téléchargement du code source de démonstration)

Exemple complet d'effet glisser-déposer jquery (avec téléchargement du code source de démonstration)_jquery

WBOY

Libérer： 2016-05-16 15:20:05

original

1404 Les gens l'ont consulté

L'exemple de cet article décrit l'effet glisser-déposer implémenté par jquery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La capture d'écran de l'effet en cours d'exécution est la suivante :

Cliquez ici pour voir la 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>
 <div id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"></img></div>
 <div id="big"></div>
</body>
</html>

Copier après la connexion

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)

Copier après la connexion

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

Les lecteurs intéressés par plus de contenu lié aux effets spéciaux et aux techniques jQuery peuvent consulter le sujet spécial de ce site : "Résumé des effets spéciaux classiques courants dans jQuery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.