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 プロキシ サーバーで双方向証明書検証を構成する方法
推薦する
JS 面接の質問: forEach はループから抜け出すことができますか?
この質問をされたとき、私は無知で頭が真っ白になりました。もちろん、正しく答えられませんでした。私はず...
VSCode 構成 Git メソッドの手順
Git は vscode に統合されており、git コマンドをいくつか記述しなくても、クリックするだ...
Linuxの相対パスと絶対パスの使用
01. 概要絶対パスと相対パスはシェル環境でよく使用され、それぞれに独自の用途があります。相対パスの...
MySql データベースのサブクエリと高度なアプリケーションの簡単な分析
MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...
vue ルーティング ビュー router-view のネストされたジャンプの実装
目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...
Ubuntuが仮想マシンでインターネットに接続できない問題の解決策
インターネットに接続できない仮想マシンをセットアップするのは非常に面倒です。ここでは、Ubuntu ...
Linux md5sumコマンドの使い方
01. コマンドの概要md5sum - MD5検証コードを計算して検証するmd5sum コマンドは、...
MySQL 8.0.20 インストール チュートリアル (画像とテキスト付き) (Windows 64 ビット)
1: mysql公式サイトからダウンロードhttps://dev.mysql.com/downlo...
CSS3で実装されたテキストポップアップ効果
成果を達成する実装コードhtml <div>123WORDPRESS.COM</d...
ディレクトリスクロール効果を実現するネイティブJS
これはネイティブ JS で実装されたテキスト スクロール効果です。この効果は通常、ニュース、ダイナミ...
Vueにおける混合継承の詳細な説明
目次混合継承の影響: 1. 継承Vue.extend メソッドプロパティを拡張する2. ミックスイ...
VMware 仮想マシンの 3 つのネットワーク方式と原則 (概要)
1. ブリッジ: デフォルトでは VMnet0 が使用されます1. 原則：ブリッジは、それぞれ 2...
Windows での mysql-5.7.28 のダウンロード、インストール、および構成に関する詳細なグラフィックとテキストのチュートリアル
最近MySQLデータベースのバージョンを変更する必要があり、それを記録するために記事を書きます1. ...
MySQL統計の概要
MySQL は、SQL 解析とクエリ最適化のプロセスを通じて SQL を実行します。パーサーは SQ...
CSS3でよく使われるスタイルの詳しい解説[基本的なテキストとフォントのスタイル]
概要: Web ページをより美しく見せるために、ここでは CSS3 でよく使用されるスタイルをいくつ...