Comment implémenter l'effet glisser-déposer jquery-js tutoriel-php.cn

Comment implémenter l'effet glisser-déposer jquery

php中世界最好的语言

Libérer： 2018-04-24 11:17:46

original

1916 Les gens l'ont consulté

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>

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

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!