So implementieren Sie den Drag-and-Drop-Effekt von JQuery-js-Tutorial-php.cn

So implementieren Sie den Drag-and-Drop-Effekt von JQuery

php中世界最好的语言

Freigeben： 2018-04-24 11:17:46

Original

1858 Leute haben es durchsucht

Dieses Mal werde ich Ihnen zeigen, wie Sie den Drag-and-Drop-Effekt von JQuery implementieren. Der Screenshot des Laufeffekts sieht wie folgt aus:

Klicken Sie hier, um den Online-Demonstrationseffekt anzuzeigen.

Der spezifische Code lautet wie folgt:

HTML-Teil:

JQuery-Teil:

<!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>

Nach dem Login kopieren

Ich glaube, Sie beherrschen die Methode Nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie für weitere spannende Inhalte bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

(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)

Nach dem Login kopieren

Empfohlene Lektüre:

jQuery implementiert die Funktion zum Vergrößern von Bildern, wenn die Maus darüber fährt

jQuery implementiert das gleitende Umschalten von Bilder (mit Code)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Drag-and-Drop-Effekt von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!