Skip to content

Commit 594938a

Browse files
jebeebejebeebe
committed
- added attribute 'ng-drag-touch-delay' to allow _pressTimer delay to be changed
- various refactoring to pass jslint - incorporate following pull request from original code to replace attributes that end in '-start' and '-end': mrphilipandrews#222
1 parent 92bacff commit 594938a

2 files changed

Lines changed: 37 additions & 29 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ Draggable usage:
3333
* If the draggable is also clickable (ng-click, ng-dblclick) the script wont react.
3434
* You can define a drag-button as child with the attribute `ng-drag-handle`.
3535

36-
```ng-drag-start``` and ```ng-drag-move``` is also available. Add to the ng-drop element.
37-
``ng-drag-stop`` can be used when you want to react to the user dragging an item and it wasn't dropped into the target container.
36+
```ng-drag-begin``` and ```ng-drag-move``` is also available. Add to the ng-drop element.
37+
``ng-drag-finish`` can be used when you want to react to the user dragging an item and it wasn't dropped into the target container.
3838

3939
```draggable:start```, ```draggable:move``` and ```draggable:end``` events are broadcast on drag actions.
4040

‎ngDraggable.js‎

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55
angular.module("ngDraggable", [])
66
.service('ngDraggable', [function() {
7+
'use strict';
78

89

910
var scope = this;
@@ -30,6 +31,7 @@ angular.module("ngDraggable", [])
3031
var _moveEvents = 'touchmove mousemove';
3132
var _releaseEvents = 'touchend mouseup';
3233
var _dragHandle;
34+
var _touchDelay = angular.isDefined(attrs.ngDragTouchDelay) && isFinite(attrs.ngDragTouchDelay) ? parseInt(attrs.ngDragTouchDelay) : 100;
3335

3436
// to identify the element in order to prevent getting superflous events when a single element has both drag and drop directives on it.
3537
var _myid = scope.$id;
@@ -41,8 +43,8 @@ angular.module("ngDraggable", [])
4143

4244
var _pressTimer = null;
4345

44-
var onDragStartCallback = $parse(attrs.ngDragStart) || null;
45-
var onDragStopCallback = $parse(attrs.ngDragStop) || null;
46+
var onDragStartCallback = $parse(attrs.ngDragBegin) || null;
47+
var onDragStopCallback = $parse(attrs.ngDragFinish) || null;
4648
var onDragSuccessCallback = $parse(attrs.ngDragSuccess) || null;
4749
var allowTransform = angular.isDefined(attrs.allowTransform) ? scope.$eval(attrs.allowTransform) : true;
4850

@@ -56,10 +58,11 @@ angular.module("ngDraggable", [])
5658
// check to see if drag handle(s) was specified
5759
// if querySelectorAll is available, we use this instead of find
5860
// as JQLite find is limited to tagnames
61+
var dragHandles;
5962
if (element[0].querySelectorAll) {
60-
var dragHandles = angular.element(element[0].querySelectorAll('[ng-drag-handle]'));
63+
dragHandles = angular.element(element[0].querySelectorAll('[ng-drag-handle]'));
6164
} else {
62-
var dragHandles = element.find('[ng-drag-handle]');
65+
dragHandles = element.find('[ng-drag-handle]');
6366
}
6467
if (dragHandles.length) {
6568
_dragHandle = dragHandles;
@@ -113,17 +116,18 @@ angular.module("ngDraggable", [])
113116
return;
114117
}
115118

116-
if (evt.type == "mousedown" && evt.button != 0) {
119+
if (evt.type == "mousedown" && evt.button !== 0) {
117120
// Do not start dragging on right-click
118121
return;
119122
}
120123

121124
if(_hasTouch){
122125
cancelPress();
126+
var delay = _touchDelay;
123127
_pressTimer = setTimeout(function(){
124128
cancelPress();
125129
onlongpress(evt);
126-
},100);
130+
},delay);
127131
$document.on(_moveEvents, cancelPress);
128132
$document.on(_releaseEvents, cancelPress);
129133
}else{
@@ -248,7 +252,7 @@ angular.module("ngDraggable", [])
248252
var moveElement = function (x, y) {
249253
if(allowTransform) {
250254
element.css({
251-
transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + x + ', ' + y + ', 0, 1)',
255+
'transform': 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + x + ', ' + y + ', 0, 1)',
252256
'z-index': 99999,
253257
'-webkit-transform': 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + x + ', ' + y + ', 0, 1)',
254258
'-ms-transform': 'matrix(1, 0, 0, 1, ' + x + ', ' + y + ')'
@@ -277,8 +281,8 @@ angular.module("ngDraggable", [])
277281

278282
var onDropCallback = $parse(attrs.ngDropSuccess);// || function(){};
279283

280-
var onDragStartCallback = $parse(attrs.ngDragStart);
281-
var onDragStopCallback = $parse(attrs.ngDragStop);
284+
var onDragStartCallback = $parse(attrs.ngDragBegin);
285+
var onDragStopCallback = $parse(attrs.ngDragFinish);
282286
var onDragMoveCallback = $parse(attrs.ngDragMove);
283287

284288
var initialize = function () {
@@ -307,7 +311,7 @@ angular.module("ngDraggable", [])
307311
if(! _dropEnabled)return;
308312
isTouching(obj.x,obj.y,obj.element);
309313

310-
if (attrs.ngDragStart) {
314+
if (attrs.ngDragBegin) {
311315
$timeout(function(){
312316
onDragStartCallback(scope, {$data: obj.data, $event: obj});
313317
});
@@ -345,7 +349,7 @@ angular.module("ngDraggable", [])
345349
}
346350
}
347351

348-
if (attrs.ngDragStop) {
352+
if (attrs.ngDragFinish) {
349353
$timeout(function(){
350354
onDragStopCallback(scope, {$data: obj.data, $event: obj});
351355
});
@@ -379,10 +383,10 @@ angular.module("ngDraggable", [])
379383
var bounds = element[0].getBoundingClientRect();// ngDraggable.getPrivOffset(element);
380384
x -= $document[0].body.scrollLeft + $document[0].documentElement.scrollLeft;
381385
y -= $document[0].body.scrollTop + $document[0].documentElement.scrollTop;
382-
return x >= bounds.left
383-
&& x <= bounds.right
384-
&& y <= bounds.bottom
385-
&& y >= bounds.top;
386+
return x >= bounds.left &&
387+
x <= bounds.right &&
388+
y <= bounds.bottom &&
389+
y >= bounds.top;
386390
};
387391

388392
initialize();
@@ -393,7 +397,7 @@ angular.module("ngDraggable", [])
393397
return {
394398
restrict: 'A',
395399
link: function (scope, element, attrs) {
396-
var img, _allowClone=true;
400+
var img, _allowClone=true, _tx, _ty;
397401
var _dragOffset = null;
398402
scope.clonedData = {};
399403
var initialize = function () {
@@ -460,7 +464,7 @@ angular.module("ngDraggable", [])
460464
};
461465
var moveElement = function(x,y) {
462466
element.css({
463-
transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, '+x+', '+y+', 0, 1)', 'z-index': 99999, 'visibility': 'visible',
467+
'transform': 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, '+x+', '+y+', 0, 1)', 'z-index': 99999, 'visibility': 'visible',
464468
'-webkit-transform': 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, '+x+', '+y+', 0, 1)',
465469
'-ms-transform': 'matrix(1, 0, 0, 1, '+x+', '+y+')'
466470
//,margin: '0' don't monkey with the margin,
@@ -469,10 +473,12 @@ angular.module("ngDraggable", [])
469473

470474
var absorbEvent_ = function (event) {
471475
var e = event;//.originalEvent;
472-
e.preventDefault && e.preventDefault();
473-
e.stopPropagation && e.stopPropagation();
474-
e.cancelBubble = true;
475-
e.returnValue = false;
476+
if (e) {
477+
e.preventDefault();
478+
e.stopPropagation();
479+
e.cancelBubble = true;
480+
e.returnValue = false;
481+
}
476482
return false;
477483
};
478484

@@ -502,10 +508,12 @@ angular.module("ngDraggable", [])
502508

503509
var absorbEvent_ = function (event) {
504510
var e = event.originalEvent;
505-
e.preventDefault && e.preventDefault();
506-
e.stopPropagation && e.stopPropagation();
507-
e.cancelBubble = true;
508-
e.returnValue = false;
511+
if (e) {
512+
e.preventDefault();
513+
e.stopPropagation();
514+
e.cancelBubble = true;
515+
e.returnValue = false;
516+
}
509517
return false;
510518
};
511519

@@ -559,7 +567,7 @@ angular.module("ngDraggable", [])
559567
callback.apply(null, args);
560568
nextFrame(callback);
561569
});
562-
})
570+
});
563571
}
564572
}
565573

@@ -650,4 +658,4 @@ angular.module("ngDraggable", [])
650658
});
651659
}
652660
};
653-
}]);
661+
}]);

0 commit comments

Comments
 (0)