1. #1
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    584
    Answers
    34
    Vote Rating
    32
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default Unanswered: setDraggable(true) resets position

    Unanswered: setDraggable(true) resets position


    Hi there,

    I have a component, which I try to make draggable like this:

    Code:
    Ext.define('App.view.MyItem', {
        extend: 'Ext.Component',
        xtype: 'myitem',
    
        config: {
            hidden: true,
            offset: null
        },
        cachedConfig: {
            baseCls: 'x-custom-item'
        },
    
        template: [
            {
                cls: 'x-custom-inner'
            }
        ],
    
        initialize: function () {
            var left = this.getOffset().x,
                top = this.getOffset().y;
    
            this.setStyle('-webkit-transform: translate3d('+ left +'px, '+ top +'px, 0px)');
    
            this.show();
    
    //Here starts the test
            Ext.defer(function () {
                this.makeDraggable();
            }, 2000, this);
    
            this.callParent(arguments);
        },
    
        makeDraggable: function () {
            var initialOffset = this.getOffset();
    
            this.setDraggable(true);
            this.getDraggable().setInitialOffset(initialOffset);
    // or
    // this.setDraggable({initialOffset: initialOffset});
        },
    ...
    As the component is not draggable in the beginning I am setting the initial position with setStyle().

    But as soon as I setDraggable() the webkit-transform is reset to x:0 y:0

    Any idea how to keep the position?

    ----------------------------------------------
    EDIT(1):
    I added draggable with the initialOffset right to the component and inside the initialize, everything is setup correct. It shows at the right position. But somewhere after the intialize the offset is reset to 0,0.
    But I am not setting anything on the component from the outside. Any idea?

    ----------------------------------------------
    EDIT(2):
    If I remove the refreshOffset from Ext.util.Draggable.js all is good. Need to find out when offset is set to 0.
    Any idea?

    ----------------------------------------------
    EDIT(3):
    If I disable the resize-event all is good. But still cannot find why the offset is reset to 0.
    • Kurt001
    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,965
    Answers
    333
    Vote Rating
    133
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    The only way to know for sure would be to step through the code. I would set a breakpoint in one of these methods and examine the call stack and step through the code.
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    584
    Answers
    34
    Vote Rating
    32
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    It happends whenever I call the show or hide event.
    By doing so the this.getDraggable().refresh() is called and this somehow resets the this.getDraggable().offset (not config.offset) is used, which in turn is always {x:0,y:0}.
    So the next I am trying is to set the aftershow event to :

    Code:
    onAfterShow: function(dragItem) {
        var draggable = dragItem.getDraggable();
    
        draggable.offset = {x: myX, y: myY};
        draggable.refresh();
    }
    If you have a better idea, this would be perfect.
    • Kurt001
    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

Thread Participants: 1

Tags for this Thread