updated

maxazan · maxazan · commit 4791dc13cc3e · 2015-02-02T15:51:36.000+02:00
diff --git a/index.html b/index.html
@@ -8,17 +8,15 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
 
-    <script type="text/javascript" src="multiple-selection.js"></script>
+    <script type="text/javascript" src="multiple-selection.min.js"></script>
     <script type="text/javascript">
     angular.module('app', ['multipleSelection']);
     </script>
 
     <style type="text/css">
     .row {
-        height: 3000px;
         width: 100%;
         overflow: hidden;
-        position: absolute;
         /* disable selection */
         
         -webkit-touch-callout: none;
@@ -28,13 +26,13 @@
         -ms-user-select: none;
         user-select: none;
     }
-    .well{
 
+    .item_container {
+        border: 1px solid #ccc;
+        padding: 10px;
     }
-    .example {
-        width: 300px;
-        height: 50px;
-        background-color: grey;
+    .item_container div {
+        width: 33%
     }
     .select-helper {
         position: absolute;
@@ -43,29 +41,32 @@
         opacity: 0.2;
     }
     .selected {
-        background-color: green;
+        background-color: green !important;
     }
     .selecting {
-        background-color: yellow;
-    }
-    .dragging {
-        background-color: blue;
+        background-color: yellow !important;
     }
     </style>
 </head>
 
 <body>
-    <div class="container-fluid" multiple-selection-zone>
-        <h1>Directives test</h1>
-        <div class="row">
-            <div multiple-selection-item class="col-md-3 well" ng-class="{'selecting': isSelecting ,'selected': isSelected, 'dragging': isDragging}" class="example">Just a div</div>
-            <div multiple-selection-item class="col-md-3 well" ng-class="{'selecting': isSelecting ,'selected': isSelected, 'dragging': isDragging}" class="example">Just a second div</div>
-            <div multiple-selection-item class="col-md-3 well" ng-class="{'selecting': isSelecting ,'selected': isSelected, 'dragging': isDragging}" class="example">Another one</div>
-            <div multiple-selection-item class="col-md-3 well" ng-class="{'selecting': isSelecting ,'selected': isSelected}" class="example">Just a last div</div>
+    <div class="container-fluid">
+        <h1>Angular Mmultiple Selection Module</h1>
+        <i>Simple way to make your element selectable</i>
+        For single selection you can use mouse click. For multiple selection you can use Ctrl + Mouse click or Mouse dragging. Try it`s easy.
+
+        <h2>Simple demo</h2>
+        <div class="row item_container" multiple-selection-zone>
+            <div multiple-selection-item class="well" ng-class="{'selecting': isSelecting ,'selected': isSelected}">Lorem ipsum dolor sit amet alias, sint magni?</div>
+            <div multiple-selection-item class="well" ng-class="{'selecting': isSelecting ,'selected': isSelected}">Lorem ipsum dolor sit amet ad mollitia fugiat minima.</div>
+            <div multiple-selection-item class="well" ng-class="{'selecting': isSelecting ,'selected': isSelected}">Lorem ipsum dolor sit amet autem!</div>
+            <div multiple-selection-item class="well" ng-class="{'selecting': isSelecting ,'selected': isSelected}">Lorem ipsum dolor sit amet beatae.</div>
+            <div multiple-selection-item class="well" ng-class="{'selecting': isSelecting ,'selected': isSelected}">Lorem ipsum dolor sit amet. Iure vitae temporibus maiores perspiciatis!</div>
         </div>
 
     </div>
 
+
 </body>
 
 </html>
diff --git a/multiple-selection.js b/multiple-selection.js
@@ -165,7 +165,7 @@ angular.module('multipleSelection', [])
                     // Check items is selecting
                     var childs = getSelectableElements(element);
                     for (var i = 0; i < childs.length; i++) {
-                        if (checkElementHitting(transformBox(offset(childs[i][0]).left, offset(childs[i][0]).top, offset(childs[i][0]).left + childs[i].prop('offsetWidth'), offset(childs[i][0]).top + childs[i].prop('offsetHeight')), transformBox(startX, startY, event.clientX, event.clientY))) {
+                        if (checkElementHitting(transformBox(offset(childs[i][0]).left, offset(childs[i][0]).top, offset(childs[i][0]).left + childs[i].prop('offsetWidth'), offset(childs[i][0]).top + childs[i].prop('offsetHeight')), transformBox(startX, startY, event.pageX, event.pageY))) {
                             if (childs[i].scope().isSelecting === false) {
                                 childs[i].scope().isSelecting = true;
                                 childs[i].scope().$apply();
diff --git a/multiple-selection.min.js b/multiple-selection.min.js
