1。序文
マウスのドラッグ要素の目的は、固定されたポジショニングのために多くの小さなドットをドラッグし、それをページの開発コードに貼り付けます。 jquery.fn.draggableプラグインを使用する必要がありました。
2。デザインのアイデア
ドラッグ要素のマウスボタンをバインドし、マウスをバインドしてドキュメントオブジェクトに移動し、マウスがイベントを跳ね返します。
3つのイベントすべてをドラッグ要素にバインドしてみませんか？
コードコピーは次のとおりです。
$ TARGET.BIND（ 'Mousedown'、fn）;
$（document）
.bind（ 'mousemove'、fn）
.bind（ 'mouseup'、fn）;
3。ソースコードの実装の詳細
ソースコードの実装には注意すべきことがたくさんあります。
1。最初に、要素をクリックしてドラッグするとき、これは次のようなものではありません。
コードコピーは次のとおりです。
// Chrome Firefox IE9の地域テキストが選択されないようにします
E.PreventDefault（）;
// firefox IE9 ||
window.getSelection？window.getSelection（）。
2。ドラッグ要素が画像（IMGタグ）である場合、マウスが画像を短い距離でドラッグすると、禁止されているプロンプトが表示されます。つまり、画像をドラッグできません。
これはブラウザのデフォルト動作であるため、ブラウザのデフォルト動作をブロックするだけです。
コードコピーは次のとおりです。
E.PreventDefault（）;
3。境界に関する質問（ドラッグ範囲の取り扱い）
最初に実装されたコードは次のとおりです。
コードコピーは次のとおりです。
// x、yは、ドラッグ要素によって設定される左と最上位の値を表し、LimitoBJはドラッグエリア範囲オブジェクトであり、テスト中に問題が見つかりました。
//ドラッグプロセス中、オブジェクトをドラッグすることは境界に直接近くになることができない場合があります
if（x> = limitobj._left && x <= limitobj._right）{
$ target.css（{左：x + 'px'}）;
}
if（y> = limitobj._top && y <= limitobj._bottom）{
$ target.css（{top：y + 'px'}）;
}
さらに考えてみると、上記の問題が発生するのはなぜですか？
したがって、コードは次のように処理する必要があります。
コードコピーは次のとおりです。
if（x <limitobj._left）{
x = limitobj._left;
}
if（x> limitobj._right）{
x = limitobj._right;
}
if（y <limitobj._top）{
y = limitobj._top;
}
if（y> limitobj._bottom）{
y = limitobj._bottom;
}
$ target.css（{左：x + 'px'、top：y + 'px'}）;
最後にこの問題を解決しましたが、Cloudgamerはそれを書くより良い方法を与えました。
コードコピーは次のとおりです。
$ target.css（{
左：math.max（math.min（x、limitobj._right）、limitobj._left） + 'px'、
TOP：math.max（math.min（y、limitobj._bottom）、limitobj._top） + 'px'
}）;
完全なプログラムソースコード：
コードコピーは次のとおりです。
$ .fn.extend（{
/**
*自動：ブログYuan Huazi YJH 2014/02/21
*/
ドラッグ：function（options）{
var Dragstart、Dragmove、Dragend、
$ boundaryelem、limitobj;
function _initoptions（）{
var noop = function（）{}、defaultoptions;
defaultoptions = {//デフォルト設定項目
境界線：「ボディ」//境界容器
};
options = $ .extend（defaultoptions、options || {}）;
$ boundaryelem = $（options.boundaryelem）;
dragstart = options.dragstart ||
dragmove = option.dragmove ||
dragend = option.dragend ||。
}
関数_drag（e）{
var clientx、clienty、offseteft、offsettop、
$ target = $（this）、self = this;
limitobj = {
_Left：0、
_top：0、
_right：（$ boundaryelem.innerwidth（）|| $（window）.width（）） - $ target.outerwidth（）、
_BOTTOM：（$ boundaryelem.innerheight（）|| $（window）.height（）） - $ target.outerheight（）
};
//マウスが押されたときに位置を記録し、ドラッグ要素の相対位置を記録します
clientx = e.clientx;
clienty = e.clienty;
offsetLeft = this.OffsetLeft;
offsettop = this.offsettop;
dragstart.apply（これ、引数）;
$（document）.bind（ 'mousemove'、movehandle）
.bind（ 'mouseup'、uphandle）;
//マウスの動きイベント処理
関数movehandle（e）{
var x = e.clientx -clientx + offsetLeft;
var y = e.clienty -clienty + offsettop;
$ target.css（{
左：math.max（math.min（x、limitobj._right）、limitobj._left） + 'px'、
TOP：math.max（math.min（y、limitobj._bottom）、limitobj._top） + 'px'
}）;
dragmove.apply（self、arguments）;
//ブラウザのデフォルトの動作をブロックします（マウスは画像を短い距離でドラッグします。禁止されたプロンプトが表示されます。つまり、画像をドラッグできなくなります）
E.PreventDefault（）;
}
//マウスバウンスイベント処理
function uphandle（e）{
$（document）.unbind（ 'mousemove'、movehandle）;
dragend.apply（self、arguments）;
}
}
_initoptions（）; //構成オブジェクトを初期化します
$（これ）
.css（{position： 'absolute'}）
.each（function（）{
$（this）.bind（ 'mousedown'、function（e）{
_drag.apply（this、[e]）;
// Chrome Firefox IE9の地域テキストが選択されないようにします
E.PreventDefault（）;
// firefox IE9 ||
window.getSelection？window.getSelection（）。
}）;
}）;
これを返します。
}
}）;
インスタンス呼び出し：
コードコピーは次のとおりです。
//インスタンスを呼び出します
（関数（）{
$（'。Drag-Elem '）。ドラッグ（{
境界線： '#boundary'、
dragstart：function（）{
$（this）.html（ '<span> drag </span>'）。css（{zindex：2}）。siblings（）。css（{zindex：1}）;
}、
dragmove：function（）{
var pos = $（this）.position（）;
$（this）.html（ '<span> drag（' + pos.left + '、' + pos.top + '）</span>'）;
}、
dragend：function（）{
$（this）.html（ '<span> drag end </span>'）;
}
}）;
}（））;