add feature drag handle for kombai#55

ilovezy · Mar 4, 2014 · 3f4eed2 · 3f4eed2
1 parent 81d0758
commit 3f4eed2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/example/draggable.html b/example/draggable.html
@@ -20,6 +20,10 @@
 			.cell .cover {
 				padding: 15px;
 			}
+			.handle {
+				border: 1px dotted orange;
+				padding: 4px
+			}
 		</style>
 	</head>
 	<body>
@@ -32,13 +36,28 @@ <h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
 			</div>
 		</div>
 		<div class="layout">
-			<div id="freewall" class="free-wall"></div>
+			<div id="freewall" class="free-wall">
+				<div class='cell' style='width:300px; height: 300px; background-color:rgb(142, 68, 173)' data-handle=".handle">
+					<div class='cover'>
+						<div class='handle'>Drag item handle</div>
+					</div>
+				</div>
+				<div class='cell' style='width:150px; height: 300px; background-color:rgb(142, 68, 173)' data-handle=".handle">
+					<div class='cover'>
+						<div class='handle'>Drag item handle</div>
+					</div>
+				</div>
+				<div class='cell' style='width:450px; height: 150px; background-color:rgb(142, 68, 173)' data-handle=".handle">
+					<div class='cover'>
+						<div class='handle'>Drag item handle</div>
+					</div>
+				</div>
+			</div>
 		</div>
 		<script type="text/javascript">
 
 			var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-color: {color}'><div class='cover'>Demo draggable</div></div>";
 			var colour = [
-				"rgb(142, 68, 173)",
 				"rgb(243, 156, 18)",
 				"rgb(211, 84, 0)",
 				"rgb(0, 106, 63)",
@@ -48,14 +67,15 @@ <h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
 				"rgb(39, 174, 96)"
 			];
 
-			var w = 1, h = 1, html = '', color = '', limitItem = 28;
+			var w = 1, h = 1,  color = '', limitItem = 28;
 			for (var i = 0; i < limitItem; ++i) {
 				h = 1 + 3 * Math.random() << 0;
 				w = 1 + 3 * Math.random() << 0;
 				color = colour[colour.length * Math.random() << 0];
-				html += temp.replace(/\{height\}/g, h*150).replace(/\{width\}/g, w*150).replace("{color}", color);
+				html = temp.replace(/\{height\}/g, h*150).replace(/\{width\}/g, w*150).replace("{color}", color);
+				$("#freewall").append(html);
 			}
-			$("#freewall").html(html);
+
 
 			var wall = new freewall("#freewall");
 			wall.reset({

diff --git a/freewall.js b/freewall.js
@@ -386,17 +386,19 @@
                 startY: 0, 
                 top: 0,
                 left: 0,
-                proxy: null,
+                handle: null,
                 onDrop: function() {},
                 onDrag: function() {},
                 onStart: function() {}
             };
-            
+
             $(item).each(function() {
                 var setting = $.extend({}, config, option);
-                var ele = setting.proxy || this;
+                var handle = setting.handle || this;
+                var ele = this;
                 var $E = $(ele);
-
+                var $H = $(handle);
+
                 var posStyle = $E.css("position");
                 posStyle != "absolute" && $E.css("position", "relative");
 
@@ -449,7 +451,7 @@
                 };
 
                 // ignore drag drop on text field;
-                $(this).find("iframe, form, input, textarea, .ignore-drag")
+                $E.find("iframe, form, input, textarea, .ignore-drag")
                 .each(function() {
                     $(this).on("touchstart mousedown", function(evt) {
                         evt.stopPropagation();
@@ -458,7 +460,7 @@
 
                 $D.unbind("mouseup touchend", mouseUp);
                 $D.unbind("mousemove touchmove", mouseMove);
-                $E.unbind("mousedown touchstart").bind("mousedown touchstart", mouseDown);
+                $H.unbind("mousedown touchstart").bind("mousedown touchstart", mouseDown);
 
             });
         },
@@ -760,8 +762,9 @@
             var cellH = runtime.cellH;
             var cellW = runtime.cellW;
             var $item = $(item);
-
+            var handle = $item.find($item.attr("data-handle"));
             layoutManager.setDragable(item, {
+                handle: handle[0],
                 onStart: function(event) {
                     if (setting.animate && layoutManager.transition) {
                         layoutManager.setTransition(this, "");