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 プロキシ サーバーで双方向証明書検証を構成する方法
推薦する
HTML のブロックレベル要素と行レベル要素、特殊文字、ネスト規則
基本的な HTML Web ページ タグのネスト ルールを紹介する場合、最初に説明する必要があるのは...
Tomcat サーバーの応答が遅い場合の解決策
1. 分析的思考1. 機械自身の理由を排除する2. サーバーパフォーマンス分析3. プロジェクト自体...
SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策
目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...
スーパーバイザーウォッチドッグの使い方を3分で学ぶ
ソフトウェアとハードウェア環境centos7.6.1810 64ビット cat /etc/red...
VueはTeleportをベースにModalコンポーネントを実装します
目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...
Linux オペレーティング システムでよく使用される MySQL コマンドの概要
以下に、一般的な MySQL コマンドをいくつか示します。 -- データベース サービスを開始します...
vue-cropper コンポーネントは画像の切り取りとアップロードを実現します
この記事では、画像の切り取りとアップロードを実装するためのvue-cropperコンポーネントの具体...
emとは？emとpxの紹介と変換方法
それは何ですか？ em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...
Linux でディスク IO を表示し、読み取りと書き込みで高い IO を占有するプロセスを見つけます。
背景 - オンラインアラートオンライン サーバーがアラームを発し、ディスク使用率 disk.util...
HTML減量 HTMLタグを合理化してWebページを作成する
HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...
js キャンバスはスライダー検証を実現します
この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...
Google 翻訳ツール: 多言語ウェブサイトを素早く実装
Google Chinaは、ウェブサイトやブログを素早く簡単に多言語化できる翻訳ツールをリリースした...
docker で Apollo をデプロイする詳細なチュートリアル
1. はじめにここでは apollo について詳しく説明しません。公式サイト https://git...
uni-app WeChatアプレット認証ログイン実装手順
目次1. appIDの申請と設定1. appidの取得方法2. AppIDの設定2. 基本的なユーザ...
jsはテーブルの追加と削除の操作を動的に実装します
この記事の例では、jsでテーブルを動的に追加および削除するための具体的なコードを参考までに共有してい...