ホームページ > 記事 > ウェブフロントエンド > jquery ドラッグ アンド ドロップ効果の完全な例 (デモ ソース コードのダウンロード付き)_jquery
jquery ドラッグ アンド ドロップ効果の完全な例 (デモ ソース コードのダウンロード付き)_jquery
- WBOYオリジナル
- 2016-05-16 15:20:051349ブラウズ
この記事の例では、jquery によって実装されたドラッグ アンド ドロップ効果について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
実行中のエフェクトのスクリーンショットは次のとおりです:
ここをクリックしてオンラインデモをご覧ください。
具体的なコードは次のとおりです:
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>
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)
完全なサンプルコードについてはここをクリックしてくださいこのサイトからダウンロードしてください。
jQuery の特殊効果とテクニックに関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「jQuery における一般的な古典的な特殊効果の概要」
をチェックしてください。この記事が jQuery プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。