修正

manji6 · Oct 31, 2011 · 7629cbe · 7629cbe
1 parent 2683e9b
commit 7629cbe
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+*.swp
diff --git a/jquery/custom_event/mousedragstop/index.html b/jquery/custom_event/mousedragstop/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
+<html lang="ja"> 
+	<head> 
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
+		<title>jQuery.event.mousestop.js sample</title>
+	</head> 
+	<body>
+		<div id="target" style="width:100px;height:100px;background-color:#ff9900;position:absolute;"></div>
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+		<script type="text/javascript" src="./jquery.event.mousestop.js"></script>
+		<script type="text/javascript">
+			$(function(){
+					$("#target").mousedragstop(function(){
+						var date = new Date();
+						$(this).text("stop!"+date.getMilliseconds())});
+			});
+		</script>
+	</body>
+</html>
+
diff --git a/jquery/custom_event/mousedragstop/jquery.event.mousestop.js b/jquery/custom_event/mousedragstop/jquery.event.mousestop.js
@@ -0,0 +1,86 @@
+/**
+ * jQuery.event.mousestop.js
+ *
+ * オリジナルイベント
+ * 「マウスが止まったとき」にイベントを実行する
+ *
+ * @author   manji6 <ryosuke.sawada@gmail.com>
+ * @requires jQuery
+ * @license  MIT Licence
+ **/
+
+/**
+ * 対象要素にマウスクリックして、ドラッグ中にマウスが止まったか判断するイベントメソッド
+ * $(element).mousedragstop(callback)
+ *
+ * @element 対象element
+ * @param   {Function} 止まっていたときに実行するfunciton
+ * @return  {jQuery}   対象element
+ *
+**/
+
+jQuery.fn.mousedragstop = function(fn,interval) {
+
+	var interval =interval || 50;
+	var container = this;
+
+	return container.each(function(){
+		var elem = this;
+		var param = {
+			flg_mousemove: false,
+			x1:-1,y1:-1,x2:-1,y2:-1,x3:-1,y3:-1,
+			e:null
+		};
+
+		var timer = function(){
+			// マウスの動きがなかった場合
+			if (param.x1 === param.x2 && param.y1 === param.y2 && param.flg_mousemove === true) {
+				// mousemoveフラグを下げる
+				param.flg_mousemove=false;
+				// mousestop()のcallback関数を実行
+				fn.call(elem, param.e);
+				param.x3 = param.x1;
+				param.y3 = param.y1;
+			}
+			// 判定対象値を書き換えて指定秒数後に再度チェックする
+			param.x2 = param.x1;
+			param.y2 = param.y1;
+			if(param.flg_mousemove !== false){
+				setTimeout(timer, interval);
+			}
+		};
+
+		// マウスが押下していないとイベント発動なし
+		$(elem).mousedown(function(ev){
+
+			// マウスが押下しているときにmousemoveを発動
+			$("html").mousemove(function(event){
+
+				//mousemove発生時のイベント内容をparamに格納
+				param.e = event;
+				param.x1=param.e.pageX - elem.offsetLeft;
+				param.y1=param.e.pageY - elem.offsetTop;
+				// mousemoveフラグが上がってなかったらフラグをあげて
+				// マウスの動作確認functionを実行する
+				if(!param.flg_mousemove) {
+					param.flg_mousemove = true;
+					timer();
+				}
+
+				return false;
+			});
+			$("html").mouseup(function(ev){
+				param.flg_mousemove=false;
+				// mousestop()のcallback関数を実行
+				if(param.x3 !== param.x2 && param.y3 !== param.y2){
+					fn.call(elem, ev);
+				}
+
+				// イベントのunbind
+				$("html").unbind("mousemove");
+				$("html").unbind("mouseup");
+				return this;
+			});
+		});
+	});
+};
diff --git a/jquery/custom_event/mousestop/jquery.event.mousestop.js b/jquery/custom_event/mousestop/jquery.event.mousestop.js
@@ -10,26 +10,25 @@
  **/
 
 /**
- * カスタムイベント
  * 対象要素にマウスクリックして、ドラッグ中にマウスが止まったか判断するイベントメソッド
  * $(element).mousedragstop(callback)
  *
- * @element 対象element(TODO これは後でmousedown()に使うかな・・・？)
+ * @element 対象element
  * @param   {Function} 止まっていたときに実行するfunciton
  * @return  {jQuery}   対象element
  *
 **/
 
 jQuery.fn.mousedragstop = function(fn,interval) {
 
-	var interval =interval || 200;
+	var interval =interval || 50;
 	var container = this;
 
 	return container.each(function(){
 		var elem = this;
 		var param = {
 			flg_mousemove: false,
-			x1:-1,y1:-1,x2:-1,y2:-1,
+			x1:-1,y1:-1,x2:-1,y2:-1,x3:-1,y3:-1,
 			e:null
 		};
 
@@ -40,6 +39,8 @@ jQuery.fn.mousedragstop = function(fn,interval) {
 				param.flg_mousemove=false;
 				// mousestop()のcallback関数を実行
 				fn.call(elem, param.e);
+				param.x3 = param.x1;
+				param.y3 = param.y1;
 			}
 			// 判定対象値を書き換えて指定秒数後に再度チェックする
 			param.x2 = param.x1;
@@ -65,12 +66,13 @@ jQuery.fn.mousedragstop = function(fn,interval) {
 					param.flg_mousemove = true;
 					timer();
 				}
+
+				return false;
 			});
 			$("html").mouseup(function(ev){
 				param.flg_mousemove=false;
-				// 既にマウスの位置が止まっている場合はtimer()の関数が実行されているのでcallbackは実行しない
-				if(param.x2 !== param.x1 && param.y2 !== param.y1){
 				// mousestop()のcallback関数を実行
+				if(param.x3 !== param.x2 && param.y3 !== param.y2){
 					fn.call(elem, ev);
 				}