Jquery はマウスドラッグ効果の実装原理と code_jquery を記述します

最近のプロジェクトで、マウス ドラッグによるレイヤー エフェクトを作成したかったので、Jquery を使用して手動で作成しました。それをみんなに共有するために送信しました。もし私の考えを理解してくれるヒーローがいれば、専門家からアドバイスを得ることができれば幸いです。コードが間違っている、または改善が必要な場合は、ご指摘いただければ幸いです。

私のアイデアは次のとおりです:
1. マウスが押されたときに、マウスの現在位置を取得します。

2. 必要な現在の位置情報を取得します。移動オブジェクトの

3. マウスが移動すると、マウスの移動距離を計算し、この距離をオブジェクトの位置に更新します。オブジェクト;

4. マウスがオブジェクトの外に移動するか、マウスが跳ね上がると、オブジェクトは移動できない状態であると見なされます。これは、私のコードでは bool 型変数 isMouseDown で表されます。この変数が true の場合、オブジェクトは移動可能な状態にあることを意味します。 false の場合、オブジェクトは移動不可能な状態にあることを意味します。マウスがオブジェクトの外に移動するか、ポップアップする場合は、isMouseDown を false に設定します。

これがアイデアです。私のアイデアが明確でない場合は、コードで確認できます。

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

#Main
>幅: 400px;
高さ:400px;
上:10px;
境界線:1px; 5px;
背景色:緑;
h3
{
幅:400px;
背景色:Gray;
cursor:move;
border-radius:5px 0 0;
="text /javascript" src="http://code.jquery.com/jquery-1.7.min.js">

🎜>

ここにマウスを置いてドラッグ

マウス

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。