PDA

View Full Version : How to make a Tooltip draggable?



Nash-T
17 Jun 2010, 10:57 AM
I am using a large transparent tooltip off a slider as a 'lens' on a timeline. Works pretty well except I don't know how to make the tooltip 'draggable' and remain useful as a 'lens'. Currently the user has to drag the slider's thumb.

The challenge is keeping the tip attached to the slider when it is dragged.

any ideas appreciated.

Thanks,
Tim

darthwes
17 Jun 2010, 3:48 PM
dude that'd be sick. ANIMAL!??

Animal
17 Jun 2010, 9:19 PM
You will need to instantiate an Ext.dd.DragDrop on the ToolTip's element.

You will also need to set Constraints on it so that it can only be dragged left/right, and so that within that access, it's constrained to within the timeline Component.

Nash-T
18 Jun 2010, 10:30 AM
Thanks for the reply.


... and so that within that access, it's constrained to within the timeline Component.

How do you keep it constrained to the timeline component? I use setYConstraint and it jumps to the top of the page and will only travel along the top of the page. I have seen it work correctly exactly once, which makes it even more frustrating.

I'm trying to build something like FIFA.com play-by-play but in javascript and not for football.

http://www.fifa.com/live/competitions/worldcup/matchday=8/day=1/match=300061464/index.html

(Hey the match is just about to start. Lets see if Rooney can end his drought.)

switch out your examples/slider/slider.js with this code to see what I mean.





var lens = Ext.extend(Ext.slider.Tip, {
init: function(slider) {
slider.on({
scope : this,
dragstart: this.onSlide,
drag : this.onSlide,
//dragend : this.hide,
destroy : this.destroy
});
},
draggable: {
insertProxy: false,
onDrag : function(e){
this.tip.el.disableShadow();
this.setYConstraint(0, 0);
},
endDrag : function(e){
console.log(this.lastPageX);
}
},
getText: function(thumb){
return String.format('<b>{0} </b><img height="50" width="50" src="images/slider-bg.png" style="opacity:0.5"></img>', thumb.value);
} ,
onSlide : function(slider, e, thumb) {
this.show();
this.body.update(this.getText(thumb));
this.doAutoWidth();
this.el.alignTo(thumb.el, 'bl', this.offsets);
},
});

Ext.onReady(function(){
new Ext.Slider({
renderTo: 'tip-slider',
width: 214,
minValue: 0,
maxValue: 100,
plugins: new lens()
});
});

Nash-T
1 Jul 2010, 8:39 AM
update: The setYConstraint issue is probably not a bug however I abandoned this approach and modified the thumb instead.
http://www.putimage.com/images/37lenspic5.png (http://www.putimage.com/view.php?filename=37lenspic5.png)