CODEWITHSUNDEEP
famo.us
Flavien Volken
Flavien Volken

Reputation: 21339

How can I scroll a scrollView using a mouse drag with famo.us?

I would like to be able to scroll a scrollView using a regular mouse drag on a desktop computer. Unfortunately currently the scrollView does only take mouse scroll and touch gestures to be moved. How could I make it work using a regular mouse drag i.e. click drag then release ?

Upvotes: 1

Views: 396

Answers (2)

IjzerenHein
IjzerenHein

Reputation: 2755

Alternatively you can use the FlexScrollView which supports mouse-events out of the box:

var scrollView = new FlexScrollView({
  mouseMove: true
});

https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md https://github.com/IjzerenHein/famous-flex

Upvotes: 0

johntraver
johntraver

Reputation: 3612

You can achieve such by using the MouseSync class. The GenericSync used by scrollview is using only TouchSync and ScrollSync. If you create your own MouseSync class you can pipe the surfaces to mouseSync and scrollview then pipe mouseSync to scrollview. Here is the example. Good Luck!

var Engine      = require('famous/core/Engine');
var Surface     = require('famous/core/Surface');
var Scrollview  = require('famous/views/Scrollview');
var MouseSync   = require('famous/inputs/MouseSync');

var context = Engine.createContext();

var surfaces = [];

var scrollview = new Scrollview();

scrollview.sequenceFrom(surfaces);

var mouseSync = new MouseSync({direction:1});

for (var i = 0; i < 10; i++) {
  var surface = new Surface({
    size:[undefined,200],
    properties:{
      backgroundColor:'hsl('+(i*360/30)+',100%,50%)'
    }
  });

  surfaces.push(surface);

  surface.pipe(mouseSync);
  surface.pipe(scrollview);

};

mouseSync.pipe(scrollview);
context.add(scrollview);

Upvotes: 4

Related Questions