[How to create a sortable list with Draggable]

Hi guys!

 

Any tips to improve the performance on Android? If you want, check please the repo and let me know your comments 

 

https://github.com/jdnichollsc/Ionic-Drag-and-Drop/blob/master/app/js/directives/draggable.js

 

PD: GSAP should create components for Ionic 1 and 2...

 

Regards, Nicholls

[How to create a sortable list with Draggable]

Hi jdnichollsc,

 

It looks you're off to a good start. I'm going to come back and look at this in more detail later today, but for now try adding autoScroll to your Draggable instance.

dragger = new Draggable(element, {
  autoScroll: 1,
  ...
});

BTW, I really like all the work you've done with Ionic, Angular, and Phaser. It's really impressive!

 

 

 

Wowwww is beautiful!!

Thanks for your examples! Check the repo with the last fix https://jdnichollsc.github.io/Ionic-Drag-and-Drop/

 

What do you think? 

 

 

Regards, Nicholls

[How to create a sortable list with Draggable]

Hi guys!

 

Check my last PoC 

See the Pen WGdaVQ?editors=0010 by jdnichollsc (@jdnichollsc) on CodePen

 

But I want to move the other items while is scrolling mmm

 

Regards, Nicholls

[How to create a sortable list with Draggable]

Hello guys!

 

Exist any example with Angular 1.x using directives? I want to do that 

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

but using Ionic Framework.

 

Using Ionic list component

<ion-list>
  <ion-item draggable ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

And using Angular directives =>

app.directive('draggable', ['$ionicGesture', function ($ionicGesture) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
          //Ionic list
          var container = element.parent()[0];

          var animation = TweenLite.to(element, 0.3, {
            boxShadow: "rgba(0,0,0,0.2) 0px 16px 32px 0px",
            force3D: true,
            scale: 1.1,
            paused: true
          });

          var dragger = new Draggable(element, {
            onPress: onPress,
            onDragStart: downAction,
            onRelease: upAction,
            onDrag: dragAction,
            cursor: "inherit",    
            type: "y"
          });


          //Any example please?
        }
    }
}]);

With the following code doesn't work well => https://gist.github.com/jdnichollsc/4c1ae672bfbad6bc364aa42f4dacd38e

 

And other PoC in Codepen

See the Pen kkvpwb?editors=1010 by jdnichollsc (@jdnichollsc) on CodePen

 

Thanks in advance, Nicholls 

[Create random curve path in canvas (road)]

How can I create a randomly road with GSAP? My idea is that a car moves for him in a canvas element (With Phaser Framework)

 

When the car is off the road I want this stalling. Sorry for my bad english 

 

Regards, Nicholls

[Animate Phaser sprite with TweenMax frame by frame]

Hi Rodrigo!

 

Thanks for your help! This works perfect!    

See the Pen ZYeWEr by jdnichollsc (@jdnichollsc) on CodePen

 

Updated: I added a way to change the background color with GSAP in the timeline! 

 

Regards, Nicholls

[Animate Phaser sprite with TweenMax frame by frame]

Hi guys! Can I animate a sprite in Phaser with GSAP? I want to animate the sprite in the timeline because I want to be able to reverse it with everything else...

 

In Phaser I animate the sprite as follows:

 

var player = this.game.add.sprite(X, Y, 'player');
player.animations.add('walk', [0, 1, 2, 3, 4 ], 15, false); //the animation end in the frame 4
player.animations.play('walk');

And I am using GSAP to tweening objects...

var tl = new TimelineLite();
tl.to(this.state1, 3, { x: -1000 });

I want to replace the sprite animation with Phaser to do this with GSAP, and to reverse this in the timeline animation with

tl.reverse();

Thanks in advance

 

PD: See please http://www.html5gamedevs.com/topic/8141-tween-atlas-frame-on-ipad/

 

Regards, Nicholls