Using Drag on GestureHandler to create a Draggable bug (Browser Chrome)
- Dominant language
- JavaScript
- Stars
- 1.7k
- Forks
- 249
- PR merge metrics
- No merged PRs in 30d
Description
When I created a Draggable node using `GestureHandler` and `drag` my example below has some side effects:
- A little janky in the Browser, but smooth on the mobile device (S3)
- When too close to the edge the drag is lost
[Alex commented here when reviewed](https://famous-community.slack.com/archives/general/p1433865026001863)
> Ok seems like the GestureHandler processes _processMouseLeave.
> No idea why, since it’s already using mouseout.
> Definitely a bug.
Here is a simple example of a draggable I created:
**[jsBin Example](http://jsbin.com/xopuqa/1/edit?js,output)**
```
var DOMElement = famous.domRenderables.DOMElement;
var Position = famous.components.Position;
var FamousEngine = famous.core.FamousEngine;
var GestureHandler = famous.components.GestureHandler;
var rootScene = FamousEngine.createScene('body');
var rootNode = rootScene.addChild();
rootNode.setAlign(0.5, 0.5);
function Draggable(root) {
this.node = root;
this.node
.setProportionalSize(0.5, 0.5)
.setMountPoint(0.5, 0.5);
this.position = new Position(this.node);
console.log(this.position);
var base = (Math.random() * 360) | 0;
this.el = new DOMElement(this.node, {
properties: {
'textAlign': 'center',
'color': 'white',
'fontSize': '30px',
'lineHeight': '40px',
'background': 'hsl(' + ((base += 37) % 360) + ',40%,50%)',
'cursor': 'pointer'
}
});
this.el.setContent('Drag Me
');
var gestures = new GestureHandler(this.node, [{
event: 'drag',
callback: drag.bind(this)
}]);
function drag(e) {
//console.log('drag', e.status, e);
switch (e.status) {
case 'start':
console.log('start drag', this.position.getValue());
break;
case 'end':
console.log('end drag', this.position.getValue());
break;
case 'move':
var d = e.centerDelta;
console.log('move drag', this.position.getValue(), d);
var pos = this.position.getValue();
this.position.set(pos.x + d.x, pos.y + d.y, pos.z);
break;
}
}
}
var dragger = new Draggable(rootNode);
FamousEngine.init();
```
Contributor guide
Assessment
This issue has not been assessed yet.