JQuery ドラッグアンドドロッププラグインの実装 code

ホームページ

ウェブフロントエンド

jsチュートリアル

JQuery ドラッグアンドドロッププラグインの実装 code_jquery

May 16, 2016 pm 06:07 PM

jquery

多くのページ効果はこれらの場所を使用します。最後の手段として、練習して覚える必要があります。
JQuery に基づくこのシンプルなドラッグアンドドロッププラグインについて話しましょう。
いつものように、最初にドラッグアンドドロップの原理と、そのようなものを作成する手順について話しましょう:
それでは、ドラッグアンドドロップとは何ですか? 名前を見ただけでわかりますが、何かを引きずります。 DOM に配置するということは、その位置を変更することを意味します。
問題は 2 つだけです: 1. ドラッグしているかどうかを確認するにはどうすればよいですか? 2. どこからドラッグするのか、どこからドラッグするのかを知るにはどうすればよいですか?
実は、これは難しいことではありません。結局のところ、どちらも熟練度が鍵となります。
js に切り替えて、ドラッグ効果を作成します。手順は次のとおりです。
1. 要素にイベントをキャプチャさせます (通常は、mousedown、mousemove、mouseup にすぎません)
2 . Mousedown の間、ドラッグの開始をマークし、要素とマウスの位置を取得します。
3. マウスの移動中に、マウスの新しい位置を継続的に取得し、対応する位置アルゴリズムを通じて要素を再配置します。
4. マウスアップ中にドラッグを終了します。。。その後、サイクルが再び始まります。
真ん中で、注意が必要な点が 1 つあります。ドラッグされた要素は、少なくとも相対的または絶対的に配置される必要があります。そうしないと、ドラッグは効果がありません。
OK、これ以上言葉もコードも真実も不要です。対応する説明がその中にあります:
ダウンロード:

コードをコピーしますコードは次のとおりです:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>ジェレミー - ドラッグドロップ テスト !</title> 
<meta name="keywords" content="Javascript自由拖拽类" /> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
(function($) 
{ 
$.extend({ 
//获取ネズミ标当前坐标 
mouseCoords:function(ev){ 
if(ev.pageX || ev .pageY){ 
return {x:ev.pageX, y:ev.pageY}; 
} 
return { 
x:ev.clientX document.body.scrollLeft - document.body.clientLeft , 
y:ev.clientY document.body.scrollTop - document.body.clientTop 
} 
}, 
//获取样式值 
getStyle:function(obj,styleName) 
{ 
return obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName]; 
// return obj.currentStyle[styleName] ? .defaultView.getComputedStyle(obj,null).getPropertyValue(styleName); 
} 
}); 
// 元素拖拽插件 
$.fn.dragDrop = function(options) 
 { 
var opts = $.extend({},$.fn.dragDrop.defaults,options); 
return this.each(function(){ 
//否か正在拖動 
var bDraging = false; 
// 移動する要素 
var moveEle = $(this); 
// この要素は、移動を開始するために必要な要素です。元素（比如标题等） 
var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ; 
if(!focuEle || focuEle.length<=0) 
{ 
 alert('focuEle が見つかりません!要素は ' this.id) の子である必要があります。 
 false を返します。 
} 
// initDiffX|Y : 初期時、マウスと移動元の原点の距離 
// moveX|Y : 移動時、移動元の位置 (新しいマウスの位置と initDiffX|Y の)差値) 
// 移動中の戻り関数が定義されている場合、そのオブジェクトはパラメータで戻り関数に渡されます。 :''}; 
// 要素が移動されるため、位置指定形式を設定する必要があります。そうしないと、効果が無効になります。 
moveEle.css({'position':'absolute','left':'0','top':' 0'}); 
//点击時，记录鼠标位置 
//DOM写法： getElementById('***').onmousedown= function(event); 
focuEle.bind('mousedown',function(e){ 
//标记开始移動 
bDraging = true; 
//マウス标形状変更 
moveEle.css({'cursor' :'move'}); 
// イベントを捕捉します。 (この方法には、移動要素によるマウスの移動を防ぐという利点もあります) 
if(moveEle.get(0) .setCapture) 
{ 
moveEle.get(0).setCapture(); 
} 
//（实际上は移動元原点の距離に対する位置） 
/ / DOM写法：(ev.clientX document.body.scrollLeft - document.body.clientLeft) - document.getElementById('***').style.left; 
dragParams.initDiffX = $.mouseCoords(e). x - moveEle.position().left; 
dragParams.initDiffY = $.mouseCoords(e).y - moveEle.position().top; 
//移動过程 
focuEle.bind('mousemove',function(e){ 
if(bDraging) 
{ 
//被移動元素の新しい位置，实际上マウス标当前元の位置と異なる位置 
// 実際には、移動される要素の新しい位置は、直接マウスの位置にすることもできます。これも実行できますが、要素の位置は正確ではありません。 = $.mouseCoords(e).x -ragParams.initDiffX; 
dragParams.moveY = $.mouseCoords(e).y -ragParams.initDiffY; 
// 特定の領域内で移動が限定されているかどうか。 //fixarea 格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值] 
if(opts.fixarea) 
{ 
if(dragParams.moveX<opts. fixarea[0]) 
{ 
dragParams.moveX=opts.fixarea[0] 
} 
if(dragParams.moveX>opts.fixarea[1]) 
{ 
dragParams .moveX=opts.fixarea[1] 
} 
if(dragParams.moveY<opts.fixarea[2]) 
{ 
dragParams.moveY=opts.fixarea[2] 
} 
if(dragParams.moveY>opts.fixarea[3]) 
{ 
dragParams.moveY=opts.fixarea[3] 
} 
} 
//移動方向：可は限定されず、垂直、水平です。
if(opts.dragDirection=='all') 
{ 
//DOM 書き込みメソッド: document.getElementById('***').style.left = '***px'; 🎜 >moveEle.css({'left':dragParams.moveX,'top':dragParams.moveY}); 
} 
else if (opts.dragDirection=='vertical') 
{ 
 moveEle.css({'top':dragParams.moveY}); 
} 
else if(opts.dragDirection=='horizo​​ntal') 
{ 
moveEle.css({'left' :dragParams.moveX}); 
} 
//コールバックがある場合
if(opts.callback) 
{ 
//dragParams をパラメータとして渡します
opts.callback. call( opts.callback,dragParams); 
} 
} 
}); 
//マウスが跳ね上がったら、移動をキャンセルすることをマークします
focuEle.bind('mouseup' ,function(e) { 
bDraging=false; 
moveEle.css({'cursor':'default'}); 
if(moveEle.get(0).releaseCapture) 
{ 🎜>moveEle.get (0).releaseCapture(); 
} 
}); 
}; defaults = 
 { 
focusEle:null, //ドラッグを開始するためにクリックされた要素は null にすることができます。空でない場合は、ドラッグされた要素の子要素である必要があります。 
callback:null, //ドラッグ時にコールバックがトリガーされます。 
dragDirection:'all', //ドラッグ方向: ['all','vertical','horizo​​ntal'] 
fixarea:null //配列形式で提供される、ドラッグされる領域を制限します [ minX, maxX,minY,maxY] 
}; 
})(jQuery); 
// テスト 
$(function(){ 
//コールバック関数を使用した限定領域。 🎜> $('#dragDiv').dragDrop({fixarea:[0,$('#dragContainer').width()-50,0,$('#dragContainer').height()-50],callback :function (params){ 
$('#span1').text('X:' params.moveX ' Y:' params.moveY); 
//デフォルト設定
 $('#dragDiv1').dragDrop(); 
</script> 
<body> =" ドラッグコンテナ" スタイル="位置:相対;左:10px;トップ:10px;境界線:1px 青の破線;幅:500px;高さ:500px;"> 
<div id="dragDiv" style="背景色:青;高さ:50px;幅:50px;"> 
</div> 
<div id="dragDiv1" style="border:1px 赤一色;高さ:50px;幅:50px ;"> 
</div> 
</div> 
<span id="span1"></span> 
</body> 
</html>