Heim > Artikel > Web-Frontend > So implementieren Sie den Drag-and-Drop-Effekt von JQuery
So implementieren Sie den Drag-and-Drop-Effekt von JQuery
- php中世界最好的语言Original
- 2018-04-24 11:17:461817Durchsuche
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ährtjQuery 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