refactor disableImgOndragstart; Closes #22

test with kitties
desandro · May 17, 2013 · 1448b2e · 1448b2e
1 parent 86b4c3d
commit 1448b2e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "draggabilly",
   "main": "draggabilly.js",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "dependencies": {
     "classie": "desandro/classie",
     "eventEmitter": ">=3",

diff --git a/draggabilly.js b/draggabilly.js
@@ -1,5 +1,5 @@
 /*!
- * Draggabilly v1.0.2
+ * Draggabilly v1.0.3
  * Make that shiz draggable
  * http://draggabilly.desandro.com
  */
@@ -21,6 +21,8 @@ function extend( a, b ) {
   return a;
 }
 
+function noop() {}
+
 // ----- get style ----- //
 
 var defView = document.defaultView;
@@ -146,7 +148,7 @@ Draggabilly.prototype.setHandles = function() {
     //   which has touch and mouse events
     eventie.bind( handle, 'mousedown', this );
     eventie.bind( handle, 'touchstart', this );
-    this._disableImgOndragstart( handle );
+    disableImgOndragstart( handle );
   }
 };
 
@@ -157,11 +159,11 @@ function noDragStart() {
   return false;
 }
 
-Draggabilly.prototype._disableImgOndragstart = function( handle ) {
-  // IE8 only
-  if ( !document.documentElement.attachEvent ) {
-    return;
-  }
+// TODO replace this with a IE8 test
+var isIE8 = 'attachEvent' in document.documentElement;
+
+// IE8 only
+var disableImgOndragstart = !isIE8 ? noop : function( handle ) {
 
   if ( handle.nodeName === 'IMG' ) {
     handle.ondragstart = noDragStart;

diff --git a/index.html b/index.html
@@ -73,13 +73,21 @@
       background: orange;
     }
 
+    #kitties {
+      background: #CCC;
+      width: 140px;
+      padding: 10px;
+    }
+
   </style>
 
 </head>
 <body>
 
   <h1>Draggabilly</h1>
 
+  <p>Press [B] to enable/disable the blue draggabilly</p>
+
   <div id="ex1" class="box">
     <div class="handle"></div>
   </div>
@@ -102,7 +110,14 @@ <h1>Draggabilly</h1>
     <div class="box"></div>
   </div>
 
-  <p>Press [B] to enable/disable the blue draggabilly</p>
+
+  <img id="kitten" src="http://placekitten.com/100/100" />
+
+  <div id="kitties">
+    <img src="http://placekitten.com/40/60" />
+    <img src="http://placekitten.com/60/40" />
+  </div>
+
 
 <script src="components/eventEmitter/EventEmitter.js"></script>
 <script src="components/eventie/eventie.js"></script>
@@ -165,6 +180,16 @@ <h1>Draggabilly</h1>
     }
   });
 
+  ( function() {
+    var elem = document.querySelector('#kitten');
+    new Draggabilly( elem );
+  })();
+
+  ( function() {
+    var elem = document.querySelector('#kitties');
+    new Draggabilly( elem );
+  })();
+
 };
 </script>