ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery はマウスドラッグ効果の実装原理と code_jquery を記述します

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

WBOY
リリース: 2016-05-16 17:45:53
オリジナル
1032 人が閲覧しました

最近のプロジェクトで、マウス ドラッグによるレイヤー エフェクトを作成したかったので、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">

🎜>

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


マウス



関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート