jQueryは、マウスをドラッグしてdivの位置とサイズを変更する方法を実装しています。
|
Windows フォームと同様の効果を得るには、中央をドラッグして div の位置を変更し、端をドラッグして div のサイズを変更します。すると、図に示すように、マウスが対応する位置で対応する形状に変わります。(スクリーンショットにはマウスは表示されていません)
コードは次のとおりです。
$(".test1").mousemove(関数(e){
$(".test1").unbind("マウスダウン");
$(".test1").css("カーソル","デフォルト");
//$("span > b").text(parseInt($("div").width()));
var left = $(".test1").offset().left;
var top = $(".test1").offset().top;
// マウスが中央にある場合 if(e.clientX - left > 10 && e.clientX-left < parseInt($(".test1").width()) - 10
&& e.clientY - top > 10 && e.clientY-top < parseInt($(".test1").height()) - 10) {
$(".test1").css("カーソル","移動");
$(".test1").mousedown(関数(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var y = e.pageY - $(".test1").offset().top;
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"left":e.pageX - x, "top":e.pageY - y});
}
}).mouseup(関数() {
ismove = false;
});
});
}
//マウスが左上隅にある場合 if(e.clientX - left < 10 && e.clientY - top < 10) {
$(".test1").css("カーソル","nw-resize");
$(".test1").mousedown(関数(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY + parseInt($(".test1").css("height"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"height":h - e.pageY, "top":e.pageY - y});
}
}).mouseup(関数() {
ismove = false;
});
});
$(".test1").mousedown(関数(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX + parseInt($(".test1").css("width"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"width":w - e.pageX, "left":e.pageX - x});
}
}).mouseup(関数() {
ismove = false;
});
});
}
//マウスが上にある場合 if(e.clientY - top < 10 && e.clientX - left > 10 && e.clientX-left < parseInt($(".test1").width()) - 10) {
$(".test1").css("カーソル","n-サイズ変更");
$(".test1").mousedown(関数(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY + parseInt($(".test1").css("height"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"height":h - e.pageY, "top":e.pageY - y});
}
}).mouseup(関数() {
ismove = false;
});
});
}
//マウスが右上隅にある場合 if(e.clientY - top < 10 && e.clientX-left > parseInt($(".test1").width()) - 10) {
$(".test1").css("カーソル","ne-resize");
$(".test1").mousedown(関数(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY + parseInt($(".test1").css("height"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"height":h - e.pageY, "top":e.pageY - y});
}
}).mouseup(関数() {
ismove = false;
});
});
$(".test1").mousedown(関数(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX - parseInt($(".test1").css("width"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"width":e.pageX - w});
}
}).mouseup(関数() {
ismove = false;
});
});
}
//マウスが右側にある場合 if(e.clientX-left > parseInt($(".test1").width()) - 10 && e.clientY - top > 10 && e.clientY-top < parseInt($(".test1").height()) - 10) {
$(".test1").css("カーソル","e-サイズ変更");
$(".test1").mousedown(関数(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX - parseInt($(".test1").css("width"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"width":e.pageX - w});
}
}).mouseup(関数() {
ismove = false;
});
});
}
//マウスが右下隅にある場合 if(e.clientX-left > parseInt($(".test1").width()) - 10 && e.clientY-top > parseInt($(".test1").height()) - 10) {
$(".test1").css("カーソル","se-resize");
$(".test1").mousedown(関数(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX - parseInt($(".test1").css("width"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"width":e.pageX - w});
}
}).mouseup(関数() {
ismove = false;
});
});
$(".test1").mousedown(関数(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY - parseInt($(".test1").css("height"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"height":e.pageY - h});
}
}).mouseup(関数() {
ismove = false;
});
});
}
//マウスが押されている場合 if(e.clientY-top > parseInt($(".test1").height()) - 10 && e.clientX - left > 10 && e.clientX-left < parseInt($(".test1").width()) - 10) {
$(".test1").css("カーソル","s-resize");
$(".test1").mousedown(関数(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY - parseInt($(".test1").css("height"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"height":e.pageY - h});
}
}).mouseup(関数() {
ismove = false;
});
});
}
//マウスが左下にある場合 if(e.clientY-top > parseInt($(".test1").height()) - 10 && e.clientX - left < 10) {
$(".test1").css("カーソル","sw-resize");
$(".test1").mousedown(関数(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX + parseInt($(".test1").css("width"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"width":w - e.pageX, "left":e.pageX - x});
}
}).mouseup(関数() {
ismove = false;
});
});
$(".test1").mousedown(関数(e) {
var ismove = true;
var y = e.pageY - $(".test1").offset().top;
var h = e.pageY - parseInt($(".test1").css("height"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"height":e.pageY - h});
}
}).mouseup(関数() {
ismove = false;
});
});
}
//マウスが左側にある場合 if(e.clientX - left < 10 && e.clientY - top > 10 && e.clientY-top < parseInt($(".test1").height()) - 10) {
$(".test1").css("カーソル","w-resize");
$(".test1").mousedown(関数(e) {
var ismove = true;
var x = e.pageX - $(".test1").offset().left;
var w = e.pageX + parseInt($(".test1").css("width"));
$(document).mousemove(関数(e) {
if(ismove) {
$(".test1").css({"width":w - e.pageX, "left":e.pageX - x});
}
}).mouseup(関数() {
ismove = false;
});
});
}
});
jQuery を使用してマウスでドラッグして div の位置とサイズを変更する方法については、これで終わりです。jQuery を使用してマウスで div をドラッグする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: nginx プロキシ サーバーで双方向証明書検証を構成する方法
推薦する
W3C チュートリアル (9): W3C XPath アクティビティ
XPath は、XML ドキュメントの一部を選択するための言語です。 XPath は、XSLT、XQ...
Linux 環境に MySQL 8.0 をインストールするプロセスの紹介
目次序文1. Linux は yum ソースを変更します (MYSQL のインストールが遅い場合は試...
CSSでnグリッドレイアウトを実装する方法
一般的なアプリケーションシナリオ現在のアプリのインターフェースは基本的に同じであり、グリッドレイアウ...
プライベートウェアハウス（レジストリとハーバー）を構築するためのDockerの実装
使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...
ウェブサイトのデザインを改善するための役立つ提案を提供します
<br />ウェブサイトを科学的にデザインする: アイトラッキング研究から学ぶ 23 の...
ウェブページエクスペリエンス: 計画と設計
1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...
nginx でのリクエストのカウント追跡の簡単な分析
まずは適用方法を説明します。nginxモジュールにはjtxyとjtcmdの2つがあります。 http...
CSS3 テキストアニメーション効果
効果 html <div class="sp-container">...
Dockerfile の一般的なコマンドの概要
構文の構成: 1 注釈情報2 コマンド --- パラメータ [通常は大文字 | 実際には大文字と小文...
CentOS8 システムをベースにした Gitlab を構築するために Docker を使用する詳細なチュートリアル
目次1. Dockerをインストールする2. GitLabをインストールする3. GitLabを初期...
Dockerコンテナを作成、起動、停止する方法
1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...
MySQL ストアド プロシージャの作成と呼び出しの詳細な説明
目次序文ストアドプロシージャ: 1. ストアドプロシージャの作成と呼び出し1. ストアドプロシージャ...
CSS3アニメーションとHTML5の新機能の詳しい説明
1. CSS3アニメーション☺CSS3 アニメーションは、JavaScript を介して要素のスタイ...
fullpage.js フルスクリーンスクロールの具体的な使い方
1.fullpage.js ダウンロードアドレスhttps://github.com/alvarot...
MySql バージョンの問題に対する完璧なソリューション sql_mode=only_full_group_by
1. sql_modeを確認する @@sql_mode を選択照会された値は次のとおりです。 ON...