diff --git a/README.md b/README.md
index 1a3cecb..00963bd 100644
--- a/README.md
+++ b/README.md
@@ -6,10 +6,9 @@ Drag and drop module for Angular JS with support for touch devices. [`demo`](htt
 ### Usage:
 
 - Install: `bower install ngDraggable`
-- Add `jquery`, `angular` and `ngDraggable` to your code:
+- Add `angular` and `ngDraggable` to your code:
 
 ```html
-<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <script src="ngDraggable.js"></script>
 ```
diff --git a/example-cancel.html b/example-cancel.html
index 428ddbe..307e35d 100755
--- a/example-cancel.html
+++ b/example-cancel.html
@@ -120,7 +120,6 @@ <h2>Cancel drag from child element.</h2>
   </div>
   <footer style="margin-top:2000px;">footer</footer>
 
-  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   <script src="ngDraggable.js"></script>
   <script>
diff --git a/example-clone.html b/example-clone.html
index 90613ad..a912630 100755
--- a/example-clone.html
+++ b/example-clone.html
@@ -100,13 +100,7 @@ <h1>ngDraggable Clone Example</h1>
           </div>
 
       </div>
-
-
-
     <hr>
-
-
-
   </div>
 
 
@@ -116,10 +110,6 @@ <h1>ngDraggable Clone Example</h1>
 
   <footer style="margin-top:2000px;">footer</footer>
 
-
-
-
-  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
   <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script>
   <script src="ngDraggable.js"></script>
   <script>
diff --git a/example-reorder.html b/example-reorder.html
index 9c83d03..c3f2a4d 100755
--- a/example-reorder.html
+++ b/example-reorder.html
@@ -109,8 +109,6 @@ <h1>ngDraggable Ordering Example</h1>
 
 <hr/>
 
-
-<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
 <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script>
 <script src="ngDraggable.js"></script>
 <script>
diff --git a/example.html b/example.html
index 11bed34..70edb74 100755
--- a/example.html
+++ b/example.html
@@ -113,7 +113,6 @@ <h1>ngDraggable Example</h1>
   </div>
   <footer style="margin-top:2000px;">footer</footer>
 
-  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   <script src="ngDraggable.js"></script>
   <script>
diff --git a/ngDraggable.js b/ngDraggable.js
index ea15411..7e79134 100644
--- a/ngDraggable.js
+++ b/ngDraggable.js
@@ -3,20 +3,19 @@
  * https://github.com/fatlinesofcode/ngDraggable
  */
 angular.module("ngDraggable", [])
-        .directive('ngDrag', ['$rootScope', '$parse', function ($rootScope, $parse) {
+        .directive('ngDrag', ['$rootScope', '$parse', '$document', '$window', function ($rootScope, $parse, $document, $window) {
             return {
                 restrict: 'A',
                 link: function (scope, element, attrs) {
                     scope.value = attrs.ngDrag;
-                  //  return;
                     var offset,_centerAnchor=false,_mx,_my,_tx,_ty,_mrx,_mry;
                     var _hasTouch = ('ontouchstart' in document.documentElement);
                     var _pressEvents = 'touchstart mousedown';
                     var _moveEvents = 'touchmove mousemove';
                     var _releaseEvents = 'touchend mouseup';
 
-                    var $document = $(document);
-                    var $window = $(window);
+                    // to identify the element in order to prevent getting superflous events when a single element has both drag and drop directives on it.
+                    var _myid = scope.$id; 
                     var _data = null;
 
                     var _dragEnabled = false;
@@ -29,17 +28,26 @@ angular.module("ngDraggable", [])
                         element.attr('draggable', 'false'); // prevent native drag
                         toggleListeners(true);
                     };
+                    
+                    // this same func is in ngDrop, it needs to be DRYed up but don't know if its
+                    // worth writing a service (or equivalent) for one function
+                    var _privoffset = function (docElem) {                        
+                        var box = { top: 0, left: 0 };
+                        if (typeof docElem[0].getBoundingClientRect !== undefined) {
+                            box = docElem[0].getBoundingClientRect();
+                        }
+                        return {
+                            top: box.top + $window.pageYOffset - docElem[0].clientTop,
+                            left: box.left + $window.pageXOffset - docElem[0].clientLeft
+                        };
+                    }                    
 
                     var toggleListeners = function (enable) {
-                        // remove listeners
-
                         if (!enable)return;
                         // add listeners.
 
-                        scope.$on('$destroy', onDestroy);
-                        //attrs.$observe("ngDrag", onEnableChange);
-                        scope.$watch(attrs.ngDrag, onEnableChange);
-                        //attrs.$observe('ngCenterAnchor', onCenterAnchor);
+                        scope.$on('$destroy', onDestroy);                       
+                        scope.$watch(attrs.ngDrag, onEnableChange);                     
                         scope.$watch(attrs.ngCenterAnchor, onCenterAnchor);
                         scope.$watch(attrs.ngDragData, onDragDataChange);
                         element.on(_pressEvents, onpress);
@@ -63,9 +71,9 @@ angular.module("ngDraggable", [])
                     
                     var isClickableElement = function (evt) {
                         return (
-                                angular.isDefined($(evt.target).attr("ng-click"))
-                                || angular.isDefined($(evt.target).attr("ng-dblclick"))
-                                || angular.isDefined($(evt.target).attr("ng-cancel-drag"))
+                                angular.isDefined(angular.element(evt.target).attr("ng-click"))
+                                || angular.isDefined(angular.element(evt.target).attr("ng-dblclick"))
+                                || angular.isDefined(angular.element(evt.target).attr("ng-cancel-drag"))
                                 );
                     }
                     /*
@@ -101,90 +109,99 @@ angular.module("ngDraggable", [])
                     var onlongpress = function(evt) {
                         if(! _dragEnabled)return;
                         evt.preventDefault();
-                        offset = element.offset();
-                        element.centerX = (element.width()/2);
-                        element.centerY = (element.height()/2);
                         element.addClass('dragging');
-                        _mx = (evt.pageX || evt.originalEvent.touches[0].pageX);
-                        _my = (evt.pageY || evt.originalEvent.touches[0].pageY);
+                        offset = _privoffset(element); 
+
+                        element.centerX = element[0].offsetWidth / 2;
+                        element.centerY = element[0].offsetHeight / 2;    
+                        
+                        _mx = (evt.pageX || evt.touches[0].pageX);
+                        _my = (evt.pageY || evt.touches[0].pageY);
                         _mrx = _mx - offset.left;
                         _mry = _my - offset.top;
-
-                        if (_centerAnchor) {
-                            _tx = _mx - element.centerX - $window.scrollLeft();
-                            _ty = _my - element.centerY - $window.scrollTop();    
+                         if (_centerAnchor) {
+                             _tx = _mx - element.centerX - $window.pageXOffset;
+                             _ty = _my - element.centerY - $window.pageYOffset;
                         } else {
-                            _tx = offset.left - $window.scrollLeft();
-                            _ty = offset.top - $window.scrollTop();    
-                        }
+                             _tx = _mx - _mrx - $window.pageXOffset;
+                             _ty = _my - _mry - $window.pageYOffset;
+                        }                        
                         
-                        moveElement(_tx, _ty);
                         $document.on(_moveEvents, onmove);
                         $document.on(_releaseEvents, onrelease);
                         $rootScope.$broadcast('draggable:start', {x:_mx, y:_my, tx:_tx, ty:_ty, event:evt, element:element, data:_data});
-
                     }
-                    var onmove = function(evt) {
-                        if(! _dragEnabled)return;
+
+                    var onmove = function (evt) {
+                        if (!_dragEnabled)return;
                         evt.preventDefault();
 
-                        _mx = (evt.pageX || evt.originalEvent.touches[0].pageX);
-                        _my = (evt.pageY || evt.originalEvent.touches[0].pageY);
+                        _mx = (evt.pageX || evt.touches[0].pageX);
+                        _my = (evt.pageY || evt.touches[0].pageY);
 
                          if (_centerAnchor) {
-                            _tx = _mx - element.centerX - $window.scrollLeft();
-                            _ty = _my - element.centerY - $window.scrollTop();
+                             _tx = _mx - element.centerX - $window.pageXOffset;
+                             _ty = _my - element.centerY - $window.pageYOffset;
                         } else {
-                            _tx = _mx - _mrx - $window.scrollLeft();
-                            _ty = _my - _mry - $window.scrollTop();
+                             _tx = _mx - _mrx - $window.pageXOffset;
+                             _ty = _my - _mry - $window.pageYOffset;
                         }
 
                         moveElement(_tx, _ty);
 
-                        $rootScope.$broadcast('draggable:move', {x:_mx, y:_my, tx:_tx, ty:_ty, event:evt, element:element, data:_data});
-
+                        $rootScope.$broadcast('draggable:move', { x: _mx, y: _my, tx: _tx, ty: _ty, event: evt, element: element, data: _data, uid: _myid });
                     }
+
                     var onrelease = function(evt) {
-                        if(! _dragEnabled)return;
+                        if (!_dragEnabled)
+                            return;
                         evt.preventDefault();
-                        $rootScope.$broadcast('draggable:end', {x:_mx, y:_my, tx:_tx, ty:_ty, event:evt, element:element, data:_data, callback:onDragComplete});
+                        $rootScope.$broadcast('draggable:end', {x:_mx, y:_my, tx:_tx, ty:_ty, event:evt, element:element, data:_data, callback:onDragComplete, uid: _myid});
                         element.removeClass('dragging');
                         reset();
                         $document.off(_moveEvents, onmove);
                         $document.off(_releaseEvents, onrelease);
-
                     }
+
                     var onDragComplete = function(evt) {
-                        if(! onDragSuccessCallback)return;
+                        if (!onDragSuccessCallback )return;
 
                         scope.$apply(function () {
                             onDragSuccessCallback(scope, {$data: _data, $event: evt});
                         });
                     }
+
                     var reset = function() {
                         element.css({left:'',top:'', position:'', 'z-index':'', margin: ''});
                     }
-                    var moveElement = function(x,y) {
-                        element.css({left:x,top:y, position:'fixed', 'z-index':99999, margin: '0'});
+
+                    var moveElement = function (x, y) {
+                        element.css({
+                            left: (x+'px'), top: (y+'px'), position: 'fixed', 'z-index': 99999
+                            //,margin: '0'  don't monkey with the margin, 
+                        });
                     }
                     initialize();
                 }
             }
         }])
-        .directive('ngDrop', ['$parse', '$timeout', function ($parse, $timeout) {
+
+        .directive('ngDrop', ['$parse', '$timeout', '$window', function ($parse, $timeout, $window) {
             return {
                 restrict: 'A',
                 link: function (scope, element, attrs) {
                     scope.value = attrs.ngDrop;
 
+                    var _myid = scope.$id;
+
                     var _dropEnabled=false;
 
                     var onDropCallback = $parse(attrs.ngDropSuccess);// || function(){};
+
                     var initialize = function () {
                         toggleListeners(true);
                     };
 
-
                     var toggleListeners = function (enable) {
                         // remove listeners
 
@@ -197,6 +214,20 @@ angular.module("ngDraggable", [])
                         scope.$on('draggable:move', onDragMove);
                         scope.$on('draggable:end', onDragEnd);
                     };
+                    
+                    // this same func is in ngDrag, it needs to be DRYed up but don't know if its
+                    // worth writing a service (or equivalent) for one function
+                    var _privoffset = function (docElem) {                        
+                        var box = { top: 0, left: 0 };
+                        if (typeof docElem[0].getBoundingClientRect !== undefined) {
+                            box = docElem[0].getBoundingClientRect();
+                        }
+                        return {
+                            top: box.top + $window.pageYOffset - docElem[0].clientTop,
+                            left: box.left + $window.pageXOffset - docElem[0].clientLeft
+                        };
+                    }                    
+
                     var onDestroy = function (enable) {
                         toggleListeners(false);
                     };
@@ -211,31 +242,30 @@ angular.module("ngDraggable", [])
                         if(! _dropEnabled)return;
                         isTouching(obj.x,obj.y,obj.element);
                     }
-                    var onDragEnd = function(evt, obj) {
-                        if(! _dropEnabled)return;
-                        if(isTouching(obj.x,obj.y,obj.element)){
+
+                    var onDragEnd = function (evt, obj) {
+                        
+                        // don't listen to drop events if this is the element being dragged
+                        if (!_dropEnabled || _myid === obj.uid)return;
+                        if (isTouching(obj.x, obj.y, obj.element)) {
                             // call the ngDraggable ngDragSuccess element callback
                            if(obj.callback){
                                 obj.callback(obj);
                             }
 
-                            // call the ngDrop element callback
-                         //   scope.$apply(function () {
-                         //       onDropCallback(scope, {$data: obj.data, $event: evt});
-                         //   });
                             $timeout(function(){
                                 onDropCallback(scope, {$data: obj.data, $event: obj});
                             });
-
-
                         }
                         updateDragStyles(false, obj.element);
                     }
+
                     var isTouching = function(mouseX, mouseY, dragElement) {
                         var touching= hitTest(mouseX, mouseY);
                         updateDragStyles(touching, dragElement);
                         return touching;
                     }
+
                     var updateDragStyles = function(touching, dragElement) {
                         if(touching){
                             element.addClass('drag-enter');
@@ -245,11 +275,12 @@ angular.module("ngDraggable", [])
                             dragElement.removeClass('drag-over');
                         }
                     }
+
                     var hitTest = function(x, y) {
-                        var bounds = element.offset();
-                        bounds.right = bounds.left + element.outerWidth();
-                        bounds.bottom = bounds.top + element.outerHeight();
-                        return x >= bounds.left
+                        var bounds = _privoffset(element);
+                        bounds.right = bounds.left + element[0].offsetWidth;
+                        bounds.bottom = bounds.top + element[0].offsetHeight;
+                        return  x >= bounds.left
                                 && x <= bounds.right
                                 && y <= bounds.bottom
                                 && y >= bounds.top;
@@ -267,7 +298,7 @@ angular.module("ngDraggable", [])
                     scope.clonedData = {};
                     var initialize = function () {
 
-                        img = $(element.find('img'));
+                        img = element.find('img');
                         element.attr('draggable', 'false');
                         img.attr('draggable', 'false');
                         reset();
@@ -301,8 +332,8 @@ angular.module("ngDraggable", [])
                             scope.$apply(function () {
                                 scope.clonedData = obj.data;
                             });
-                            element.css('width', obj.element.width());
-                            element.css('height', obj.element.height());
+                            element.css('width', obj.element[0].offsetWidth);
+                            element.css('height', obj.element[0].offsetHeight);
 
                             moveElement(obj.tx, obj.ty);
                         }
@@ -323,7 +354,10 @@ angular.module("ngDraggable", [])
                         element.css({left:0,top:0, position:'fixed', 'z-index':-1, visibility:'hidden'});
                     }
                     var moveElement = function(x,y) {
-                        element.css({left:x,top:y, position:'fixed', 'z-index':99999, visibility:'visible'});
+                        element.css({
+                            left: (x+'px'), top: (y+'px'), position: 'fixed', 'z-index': 99999, 'visibility': 'visible'
+                            //,margin: '0'  don't monkey with the margin, 
+                        });
                     }
 
                     var absorbEvent_ = function (event) {