jQuery バージョン要素のドラッグ プロトタイプ code_jquery

この記事では主にドラッグ アンド ドロップ プロトタイプを分析し、JQuery を初めて使用するファン向けに簡単な例を提供します。
Jquery.js を導入した後:

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

< script type="text/javascript">
$(function(){
//バインドドラッグ要素オブジェクト
bindDrag(document.getElementById('test'));
} ) ;
function bindingDrag(el){
//初期化パラメータ
var els = el.style,
//マウスの X 軸と Y 軸の座標
x = y = 0;
//邪悪な人差し指
$(el).mousedown(function(e){
//要素を押した後、現在のマウス位置を計算します
x = e.clientX - el.offsetLeft ;
y = e.clientY - el.offsetTop;
//IE でフォーカスをキャプチャ
el.setCapture && el.setCapture();
//バインディング イベント
$(document) .bind ('mousemove',mouseMove).bind('mouseup',mouseUp);
//移動イベント
関数mouseMove(e){
//ユニバース超無敵操作..
els.top = e.clientY - y 'px';
els.left = e.clientX - x 'px';
}
関数MouseUp (){
//IE でフォーカスを解放します
el.releaseCapture && el.releaseCapture();
//イベントをアンインストールします
$(document).unbind('mousemove',mouseMove)。 unbind ('mouseup',mouseUp);
}
}



ダウンロード:

完全な例