マウスのドラッグと移動サブフォームのJS実装_JavaScriptスキル

1. サブフォーム

Web サイトをデザインするときは、

などのいくつかのモーダル サブフォームをデザインする必要があります。

このステップは簡単に実装できます。必要なのは div CSS だけです。コードを参照してください:

コードをコピーします コード

<div class="modal-background"></div>
<div class="modal-window">
< div class="head">
< >

コードをコピー

コードは次のとおりです:.modal-background{ 背景色 : #999999;

下: 0;

左: 0;
不透明度: 0.3;
位置: 固定;
右: 0;
上: 0;
z -index: 1100;
}

.modal-window
{
背景色: #FFFFFF;
ボーダー: 1px ソリッド #6B94AD; ボックスシャドウ: 5px 5px 5px #6B94AD;

フォントファミリー: 'Microsoft YaHei';
font-size: 12px;
height: 120px;
left: 50%;
margin-left: -160px;
margin-top: -160px;
不透明度: 1;
位置: 固定;
上部: 50%;
幅: 320px;
Z インデックス: 1110;
}

.modal-window .head
{
高さ: 25px;
カラー: #fff;

フォントの太さ: 600;

背景画像: -moz-linear-gradient (top, #4A8CC5, #2963A5); /* Firefox */
背景画像: -webkit-gradient(linear, 左上, 左下, color-stop(0, #4A8CC5), color-stop(1) , #2963A5)); /* Saf4、Chrome */
フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8CC5', endColorstr='#2963A5', GradientType='0'); */
}

.modal-window .head center
{
padding-top: 2px;
}

上記のhtmlとcssを追加することで、上記のモーダルフォームの効果を簡単に実現できます。このうち、left: 50%; top: 50%; margin-left: -160px; margin-top: -160px; は、このモーダル フォームのセンタリング効果を実現します。

もちろん、モーダル フォームのサイズはスタイル クラス .modal-window で固定されています。これは、モーダル フォームのサイズを変更できないという意味ではありません。たとえば、次のコードを書きました。

コードをコピー

コードは次のとおりです: <div class="modal-background "＆gt;＆lt;/div＆gt;＆lt; div class =" modal-window list-window "＆gt;私の場所＆lt;/center＆gt;

コードの 2 行目では、.list-window スタイル クラスを追加して、.modal-window クラスのサイズと位置をカバーしますが、同時にモーダル フォームが中央に表示されるようにします

コードをコピー


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

.list-window
{

幅:600px; 高さ:400px; マージン左:-300px; マージン上:-200px;}

写真の通り

このステップの実装は非常に簡単であることがわかります。いくつかの重要な行の CSS 属性をマスターすると、このモーダル サブフォームを「完全に悪用」できるようになります。

2. サブフォームの先頭をクリックしたときにサブフォームをドラッグして移動するにはどうすればよいですか? jQ を導入すると、この小さな機能を実装するために必要なスクリプトはわずか数個だけです。信じられないなら、見てみましょう

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

var left, top, $this;
$ (document).delegate('.modal-window .head', 'mousedown', function (e) {
left = e.clientX, top = e.clientY, $this = $(this). css(' カーソル', '移動');
this.setCapture ? (
this.setCapture(),
this.onmousemove = function (ev) {mouseMove(ev || イベント); },
this.onmouseup = MouseUp
) : $(document).bind("mousemove", MouseMove).bind("mouseup", MouseUp);
});
function MouseMove(e) {
var target = $this.parents('.modal-window');
var l = Math.max((e.clientX - left Number(target.css('margin-left').replace (/px $/, '')) || 0), -target.position().left);
var t = Math.max((e.clientY - top Number(target.css('margin- top') .replace(/px$/, '')) || 0), -target.position().top);
l = Math.min(l, $(window).width() - target.width () - target.position().left);
t = Math.min(t, $(window).height() - target.height() - target.position().top);
left = e.clientX;
top = e.clientY;
target.css({ 'margin-left': l, 'margin-top': t });
}
function MouseUp (e) {
var el = $this.css('cursor', 'default').get(0);
el.releaseCapture ?
(
el.releaseCapture( ),
el.onmousemove = el.onmouseup = null
): $(document).unbind("mousemove", MouseMove).unbind("mouseup", MouseUp);
}

このコードは非常に短く、さまざまなブラウザでスムーズに実行できます。

実際、その実装原理は非常にシンプルで、大きく 3 つのステップに分けることができます:

①モーダルフォームの先頭でマウスをクリック(マウスダウン)すると、すぐにmousemoveイベントとmouseupイベントをドキュメントにバインドします

② マウスが跳ね上がっていない(マウスアップなし)場合、フォーム内でマウスが移動すると、mouseMove関数が起動し、マウスの移動距離を計算してフォーム全体の位置を時間的に移動させます。

③マウスが上に跳ね返ったとき(mouseup)、mouseUpイベントを呼び出して、ドキュメントにバインドされているmousemoveイベントとmouseupイベントのバインドを解除します。

プロセス全体の原理は次のとおりです。マウスがマウスダウンされると、マウス移動イベントがドキュメントに転送され、ドキュメント上のマウス移動イベントを通じてフォーム全体が処理されます。

さらに、mouseMoveにはちょっとしたトリックがあります。つまり、グローバルのleft変数とtop変数が最後にマウスが停止したときの位置を記録し、次にマウスの位置をleft変数とtop変数と比較します。移動時間を計算して、それに応じてモーダル サブフォーム全体を移動するためのマウスの移動距離を決定します。

このコード部分を分析した結果、フォームやドキュメント上の任意の要素をマウスで簡単に移動できることがわかりました

たとえば、ドラッグ アンド ドロップでフォームのサイズを変更したい場合は、mouseMove イベント ハンドラー関数でフォームのサイズを調整するだけです。もう 1 つの小さなコツを覚えたでしょうか。一歩前進しますか？

setCapture と releaseCapture はそれぞれ何をするのか疑問に思う人もいるかもしれません。実は、これは IE との互換性のためであり、この 2 つの機能を備えているのは IE だけです。 setCapture を使用すると、現在の要素ですべてのマウス イベントをキャプチャできるようになります。これを使用しない場合、IE ブラウザと互換性がない可能性があります。