jQuery でレイヤーをドラッグ (表示領域内)_jquery

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

(function($){
$.fn .extend( {
mydrag:function(){
var boxX = 0; //ページ上の要素の横座標
var boxY = 0; //ページ上の要素の縦座標
var dMouseX = 0; //マウスが押されたときのマウス位置の横座標
var dMouseY = 0; //マウスが押されたときのマウス位置の縦座標
var mMouseX = 0; /マウス移動時のマウス位置の縦座標
var mMouseY = 0 //マウス移動時のマウス位置の縦座標
var moveLenX = 0;マウスの移動距離、水平方向
var moveLenY = 0 //マウスの移動距離、垂直方向を保存します
var isMove = false; //レイヤーをドラッグするかどうかの入力「スイッチ」
var moveX = 0; //移動要素の LEFT 値
var moveY = 0; // 移動要素の TOP 値
// 表示領域の右端の値
var rightest = document.documentElement.clientWidth - $(".top").parent().outerWidth ();
//ビジュアル領域の右端の値
varbottomest = document.documentElement.clientHeight - $(".top").parent ().outerHeight();
// マウスの実行時のマウス位置の座標を取得します。
var getMoveMouse = function(move){
mMouseX = move.pageX; = move.pageY;
}
//ページ上の要素を取得
var getbox = function(m){
boxX = $(".box").offset( ).left;
boxY = $(".box").offset( ).top;
}
//マウスが押されたときの座標を取得します
var getDownMouse = function(m) {
dMouseX = m.pageX;
dMouseY = m.pageY;
}
//マウスの移動距離の値を取得します
var getMoveLen = function(){
moveLenX = mMouseX - dMouseX;
moveLenY = mMouseY - dMouseY;
}
/ /マウスが上にあるときは、マウスが動いても要素は動きません。 (document).mouseup(function(){
isMove = false;
})
//要素の TOP バインディング イベント
$(this) を与えます。
// の座標を取得します。要素と押されたときの現在のマウス位置;
mousedown(function(e){
getbox(e) ;
getDownMouse(e)
isMove = true;
//移動時の移動距離を取得し、要素のTOPとLEFTの値を設定
mousemove(function(e) {
var $this = $(this);
getMoveMouse(e; );
getMoveLen();
if(isMove){
//要素が表示領域外に移動しないようにします
//表示領域ブラウザの一番左側
if(movingX< ;0){
$this.css({"left":0});
if(movingY$ this.css({"top":0}); >}else if(movingY >bottomest){
$this.css({"top":bottomest});
}else{
$this.css({"top":boxY moveLenY} );
}
}
// 表示領域ブラウザの上部
else if(movingY$this.css({"top":0});
if(movingX>rightest){
$this.css({"left":rightest});
}else{
$this.css({"left":boxX moveLenX}) ;
}
}
// 表示領域ブラウザの右端
else if(movingX > rightest){
$this.css({"left":rightest}) ;
if(movingY >bottomest){
$this.css({"top":bottomest});
}else{
$this.css({"top":boxY moveLenY) });
}
}
// 表示領域ブラウザの下部
else if(movingY >bottomest){
$this.css({"top":bottomest} );
if(movingX$this.css({"left":0});
}else{
$this.css({"left":boxX moveLenX) });
}
}
//その他の状況、つまり表示領域の中央
else{
$this. css({"left":boxX moveLenX, "top":boxY moveLenY});
}
movingX = boxX moveLenX;
movingY = boxY moveLenY;
}
})
}) (jQuery)


主なアイデア:
1. マウスが移動すると要素も移動するため、マウスの移動距離を取得する必要があります。
2. と を押します。レイヤーをドラッグする前にマウスを移動してください。したがって、マウスがここに移動するとレイヤーが移動する「スイッチ」が必要です。これが「オフ」の場合、マウスが移動してもレイヤーは一緒に移動しません。
3. ブラウザの表示領域のレイヤー要素、左端、端、上、下の値を取得します。そして、レイヤーをドラッグするプロセス中に、現在のレイヤーの座標値とこれらの値を比較し、これらの値を超えているかどうかを確認します。この場合、この方向にドラッグすることはできなくなります。つまり、値を最小値または最大値に設定することはできません。
私の判断は少し複雑な気がしますが、判断を簡略化する方法についてアドバイスをいただけますか?

デモをダウンロード