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 プロキシ サーバーで双方向証明書検証を構成する方法
推薦する
MySQLテーブルのテーブル構造を素早く変更する方法
MySQL テーブルのテーブル構造をすばやく変更する - 「MySQL 管理」から抜粋 ALTER ...
Nginx ドメイン名 SSL 証明書の構成 (Web サイトの http を https にアップグレード)
序文HTTP と HTTPS日常生活でよく使われる URL は、おおまかに次の 2 種類に分けられま...
Linux 上での Go 環境の構築のインストールと設定の説明
Linux で Go 環境を構築するのは非常に簡単です。 1. go1.2.1.linux-386....
Dockerを使用して外部からアクセス可能なMySQLを構築する詳細な説明
MySQL 8.0をインストールする docker run -p 63306:3306 -e MYS...
HTMLタグを閉じるのを忘れないでください
Web 標準に準拠した Web ページの構築は、jb51.net が常に全員と議論しているトピックで...
docker tagとdocker pushの使い方の詳しい説明
Dockerタグの詳しい説明docker tag コマンドの使い方と、ローカルイメージを daocl...
MySQL マルチテーブル共同クエリ操作例の分析
この記事では、MySQL のマルチテーブル共同クエリ操作について説明します。ご参考までに、詳細は以下...
Docker による Oracle 11g イメージ構成のプルに関する詳細なチュートリアル
さっそくAlibaba の oracle11g イメージをプルして構成する docker の記録を開...
Vue2で配列の変更を検出できない理由と解決策
目次回避策Vue2.0 で 2 つの配列の変更を監視できないのはなぜですか?ソースコード分析ヴュー3...
Alibaba Cloud によって追加されたセキュリティ グループ ポートと、追加後にアクセスできない問題のトラブルシューティング
目的： 1. Alibaba Cloud Serverを介してサーバーの外部ネットワークをマッピング...
Linux での MySQL 5.6.27 インストール チュートリアル
この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...
ドメイン名、ポート、IPに基づいてnginx仮想ホストを構築する
nginxでサポートされている仮想ホストには3つの種類があります1. ドメイン名ベースの仮想ホスティ...
あなたが知らない Linux KDE アプリケーション 11 選
翻訳Kool Desktop Environment の略称。 Linux、Unix、FreeBSD...
よくある HTML タグの記述エラー
HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...
vue3 を使用してマテリアル ライブラリを構築する方法
目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか？素材の種類fuep、vue3 ベー...