View Full Version : Custom TextArea Drag and Drop question

13 Jul 2009, 5:27 AM
I've set up Drag and Drop between an Ext.grid.GridPanel and an Ext.form.TextArea, and so far its working pretty well. I've got it set up so that it inserts the relevant text from the grid's record at the cursor in the TextArea. For a next step, I'd like to be able to have the text cursor follow the mouse cursor as the user drags over the TextArea, so that when they drop, the text gets inserted exactly where they drop it. My code right now is:

var formulaDropTarget = new Ext.dd.DropTarget(self.getEl().dom,
ddGroup: "formulaDDGroup",
notifyDrop: function(source, event, data){
var record = data.selections[0]; //grid will only allow one to be selected.
var displayValue = record.data.displayValue;
var calcValue = record.data.calcValue;

var formulaArea = Ext.getCmp("formulaArea");
formulaArea.insertTokenAtCursor(formulaArea.newElementToken(displayValue, calcValue));
notifyOver: function(source, event, data){
//Move text cursor to mouse here?
return this.dropAllowed;
The overall goal is just to drop text into the TextArea exactly where the mouse cursor is, so if this isn't the right way to go about it I'd be happy to listen to other suggestions. Thanks in advance for any ideas!

13 Jul 2009, 5:56 AM
I'd like to know if this is possible. If you can work this miracle, please post your results!

How are you proposing to calculate the caret position taking into account all the content of the textarea just from the X,Y position of the mouse pointer? I don't see how its posible.

13 Jul 2009, 7:34 AM
Yeah, that's about where I got stuck, too. I was hoping someone knew of some browser functions to help out with this. I don't think it will be possible to calculate the caret position without help from the browser b/c you'd have to take into account text formatting, sizing, and too many other things to think about.

The one hack that I could think of to get around this is to try to find a way to emulate a click on the TextArea in notifyOver. Basically the user would be clicking 100's of times/second as they drag. Not the most elegant solution, and you'd have to be careful not to drop on this click, so I'm not sure how well it would work. I'll keep looking and experimenting and let you know if I find/come up with anything.

13 Jul 2009, 9:49 AM
Maybe you'll Not Need to Fire the onclick Event all the time..
If a mousedown Starts selecting The Text in the textarea you would Be able to calculaet the the current curserposition via the Browsers carret functionality!

+1 for posting your results!

3 Feb 2011, 9:16 AM
Any results on this?

I need the same functionality and I'm wondering if you have discovered an "easy" way of doing this.

I'm thinking to implement an algorithm that obtains the mouse coordinates and calculates where to set the cursor. I think this is the "hard" way. I will need to measure the text, find which words are on every row and so on... very complex.