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 プロキシ サーバーで双方向証明書検証を構成する方法
推薦する
Linux ifconfig コマンドの使用
1. コマンドの紹介ifconfig (ネットワーク インターフェイスを構成する) コマンドは、ネッ...
ウェブページサイズに関する調査
<br />統計によると、Web ページの平均サイズは 2003 年以降 3 倍に増加し...
異なるデータベースで DROP TABLE を書く方法
異なるデータベースで DROP TABLE を書く方法1.MySQL 存在する場合はテーブルを削除 ...
docker compose helloworld を使い始めるための詳細なプロセス
前提条件Compose は、Docker コンテナをオーケストレーションするためのツールです。Doc...
Dockerイントラネット侵入FRP展開の実装プロセスの分析
1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...
Dockerイメージを素早くデプロイして実行する最新のIDEAプロセスの詳細な説明
背景docker とアイデアを使用して、Java Web の開発、展開、運用までのプロセス全体を実現...
MySQL ステートメントの概要
目次1. データベースの使用を選択2. 情報を表示する3. テーブルを作成する4. データを挿入する...
VmWareでcentos7をインストールするときにインターネットにアクセスできない問題の解決策
Centos7 のインストール時に VmWare がインターネットにアクセスできない場合はどうすれば...
docker-composeの詳細なインストールと使用方法
Docker Compose は、複雑なアプリケーションを定義および実行するための Docker ツ...
Centos8.3、dockerデプロイメントspringbootプロジェクトの実際のケース分析
導入現在、k8s は非常に人気があり、それについて学ぶために本を購入しました。しかし、k8s では数...
Tomcat は、Springboot プロジェクトの WAR パッケージの起動時にエラーを報告します: 子の起動時にエラーが発生しました
今日、会社の Springboot プロジェクトは、テストのためにテスト サーバーにデプロイする準備...
Alibaba Cloud Serverにプログラムをデプロイし、ドメイン名を使用して直接アクセスする方法の詳細な説明
何もすることがなかったので、学習用に最も安いAlibaba Cloudサーバーを購入しました。年間3...
React Routerの歴史について簡単に説明します
React Router を理解したいなら、まず歴史を理解する必要があります。より具体的には、Rea...
JS における for、for...in、for...of、forEach の違いと使用例
forループ基本的な構文形式: for(変数の初期化; 条件式; 演算式){ループ本体ステートメント...
意外と知らないJSのループ速度テストのいろいろを徹底解説
目次序文1. forループ2. whileループとdo-whileループ3. forEach、map...