ホームページ > 記事 > ウェブフロントエンド > jquery プラグイン jquery.dragscale.js は、要素のドラッグとサイズ変更のメソッドを実装します (デモ ソース コードのダウンロード付き)_jquery
jquery プラグイン jquery.dragscale.js は、要素のドラッグとサイズ変更のメソッドを実装します (デモ ソース コードのダウンロード付き)_jquery
- WBOYオリジナル
- 2016-05-16 15:13:382137ブラウズ
この記事の例では、jquery プラグイン jquery.dragscale.js が要素のサイズを変更するためのドラッグを実装する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
このプラグインは記事の作成者によって作成され、その目的は、作成者の JS 能力を向上させることと、ベテランがプラグインを使用する際の利便性を提供することです。
このプラグインは、現在一般的に行われているドラッグ アンド ドロップによる要素のサイズ変更の効果を実現するように設計されており、実際のニーズに応じて、ドラッグされた要素の最小幅と高さ、最大幅と高さを設定できます。全体的なコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.box{position:absolute;left:100px;top:100px;border:1px solid #eee;width:150px;height:150px;padding:10px;cursor:move;}
.drag{position:absolute;bottom:3px;right:3px;display:block;width:7px;height:7px;background:url(scale.png) no-repeat}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.resizable.js"></script>
</head>
<body>
<div class="box">拖拽我吧！<span class="drag"></span></div>
<script>
$(function(){
$(".drag").resizable({
minW : 150,
minH : 150,
maxW : 500,
maxH : 500,
});
})
</script>
</body>
</html>
プラグイン jquery.dragscale.js コード:
/*
*resizable 0.1
*Dependenc jquery-1.7.1.js
*/
;(function(a){
a.fn.resizable = function(options){
var defaults = { //默认参数
minW : 150,
minH : 150,
maxW : 500,
maxH : 500,
}
var opts = a.extend(defaults, options);
this.each(function(){
var obj = a(this);
obj.mousedown(function(e){
var e = e || event; //区分IE和其他浏览器事件对象
var x = e.pageX - obj.position().left; //获取鼠标距离匹配元素的父元素左侧的距离
var y = e.pageY - obj.position().top; //获取鼠标距离匹配元素的父元素顶端的距离
$(document).mousemove(function(e){
var e = e || event;
var _x = e.pageX - x; //动态获取匹配元素距离其父元素左侧的宽度
var _y = e.pageY - y;
_x = _x < opts.minW ? opts.minW : _x; //保证匹配元素的最小宽度为150px
_x = _x > opts.maxW ? opts.maxW : _x; //保证匹配元素的最大宽度为500px
_y = _y < opts.minH ? opts.minH : _y;
_y = _y > opts.maxH ? opts.maxH : _y;
obj.parent().css({width:_x,height:_y});
}).mouseup(function(){
$(this).unbind("mousemove"); //当鼠标抬起 删除移动事件 匹配元素宽高变化停止
});
});
})
}
})(jQuery);
完全なサンプルコードについては、ここをクリックしてくださいこのサイトからダウンロードしてください。
さらに jQuery 関連のコンテンツに興味のある読者は、このサイトの特別トピック「JQuery ドラッグ効果とスキルの概要」、「jQuery 拡張機能のスキルの概要」をチェックしてください。 、「jQuery共通古典特撮まとめ」、「jQueryアニメーション・特撮使い方まとめ」、「jQueryセレクター使い方まとめ」、「jQuery」一般的なプラグインと使い方のまとめ》
この記事が jQuery プログラミングのすべての人に役立つことを願っています。