suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie den Drag-and-Drop-Effekt von JQuery

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

php中世界最好的语言
php中世界最好的语言Original
2018-04-24 11:17:461882Durchsuche

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>

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)

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery ermöglicht ein nahtloses Scrollen der BildverbindungNächster Artikel：jQuery ermöglicht ein nahtloses Scrollen der Bildverbindung

In Verbindung stehende Artikel

Mehr sehen