ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryは、ドラッグ可能なポップアップレイヤーエフェクトを実装します

jQueryは、ドラッグ可能なポップアップレイヤーエフェクトを実装します

WBOY
WBOYオリジナル
2016-05-16 16:22:181357ブラウズ

関数は非常にシンプルですが、非常に実用的で、コードはより簡潔なので、これ以上ナンセンスになることはありません

ソースコードを提供します:

コードをコピーします コードは次のとおりです:


http://www.w3.org/1999/xhtml">
<頭>





<スクリプトタイプ="text/javascript">
$(関数() {
varmouseOffx = 0;
varmouseOffy = 0;
var isDrag = false;
$(".dragBox div:eq(0)").unbind(".click").on("mousedown", function (ev) {
MouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left;
MouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().top;
isDrag = true;
})
$(document).unbind(".click").on("mousemove", function (ev) {
var mourseX = ev.clientX、mourseY = ev.clientY;
var moveX = 0、moveY = 0;
if (isDrag === true) {
moveX = mourseX -mouseOffx;
moveY = mourseY - マウスオフ;
var maxX = $(window).outerWidth(false) - $(".dragBox").outerWidth(false);
var maxY = $(window).outerHeight(false) - $(".dragBox").outerHeight(false);
moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));
$(".dragBox").css({ "left": moveX, "top": moveY });
}
});
$(document).unbind(".click").on("mouseup", function () {
isDrag = false;
});
});



テスト







声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。