Issue when drag left or right border overlap item.

[Zeng Sunyson]

Hi, Jos

Thanks for your great tool.

I'm using: timeline-2.9.0.zip CHAP and want to extend the RangeItem.

1.

When I drag a left or right border of overlap item, the item will move to the top position of current group.

links.Timeline.ItemBox.prototype.setPosition = function (left, right) {

      ......

    if (this.group) {

        this.top = this.group.top;

        dom.style.top = this.top + 'px';

    }

};

I think that's the reason.

I have to identify the move is a type of dragLeft,dragRight or change group.

If it's dragLeft or dragRight, then set the item current top, otherwise set the group top. 

Any suggestion?

BTW

When item selected, I want to get the reference of Timeline to calculate the position of dom.

Would you please make item.prototype.select = function (timeline) like item.prototype.getRight = function (timeline) .

Sorry for my poor english. ;)

[Jos de Jong]

Hi, thanks. I'm not sure what you mean with the item moving to the top position of the current group when dragging it's left or right side.

To know whether a change or a changed event was caused by a left-drag,  right-drag, or dragging the item as a whole, you can compare the start and end position passed to the event listener with the old values of the item (read them from your original data). If start is the same and end is changed, you are dealing with a right-drag, etc.

It's not officially supported to access the DOM of items in the Timeline, but you can reach them via timeline.items[index].dom. 

[Zeng Sunyson]

Thanks for your responses.

I mean when I try the example15_mobile.html in the examples. 

When I move one item to make it overlap with another item in the same group. I drag or move the below item,  the item will move to the top position of current group. 

It seems a little strange.

You can try.

In fact I have implement a custom 2BoxRangeItem with a process drag and process box.

Now It works well, 

gantt.Timeline.Item2Range = function (data, options) {
    gantt.Timeline.Item.call(this, data, options);
    //Item2Range need stop value
    this.stop = data.stop ? data.stop : data.start || data.end;
};


gantt.Timeline.Item2Range.prototype = new gantt.Timeline.Item();

gantt.Timeline.Item2Range.prototype.select = function (timeline) {

    var dom = this.dom;

    var left = timeline.timeToScreen(this.start),

        right = timeline.timeToScreen(this.end);

        progress = timeline.timeToScreen(this.stop);

    links.Timeline.addClassName(dom, 'gantt_selected');
    //......
}

but I need a reference of timeline to calculate the position of date, so I have to modify the timeline.js source code. 

line 4955：newItem.select( ); --> newItem.select(this);

line 5140:item.select(this); 

 A little ugly.

Any suggestions? 

Tanks.

在 2014年9月26日星期五UTC+2上午10时28分20秒，Jos de Jong写道：

[Jos de Jong]

yes, the items stack on top of each other unless you set option stackEvents to false. If you want some specific order for the stacked items, you can specify a customStackOrder function in the options, see docs for how that works

[Zeng Sunyson]

Thanks. I think it's more easy to describe the issue with a video.

--
You received this message because you are subscribed to a topic in the Google Groups "CHAP Links Library" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/chap-links-library/7-j2oRBkS1A/unsubscribe.
To unsubscribe from this group and all its topics, send an email to chap-links-libr...@googlegroups.com.
To post to this group, send email to chap-link...@googlegroups.com.
Visit this group at http://groups.google.com/group/chap-links-library.
For more options, visit https://groups.google.com/d/optout.

[Jos de Jong]

Thanks for your clear video. The stacking is indeed not so nice when using groups.

I created an issue for this on github: https://github.com/almende/chap-links-library/issues/322

Note that this issue is solved in the successor of the library, vis.js.