Famous / Famous/engine

Using Drag on GestureHandler to create a Draggable bug (Browser Chrome)

Open
#255 6 comments 0 reactions 0 assignees View on GitHub
bug enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.