...

View Full Version : Draggable toolbar steals focus?



dinu
02-24-2007, 02:32 AM
Hi,

I'm implementing a draggable toolbar for a web page, using a positioned div layer. The problem is that when I click on the toolbar to move it, the input field I'm editing loses focus. Is there a way to move the thing using onmousedown and onmouseup and still not lose focus of the control active at the moment of the click?

MikeFoster
02-24-2007, 08:51 AM
Hi dinu, Welcome to Codingforums!

You might try

toolbarElement.onfocus = function() { return false; };

dinu
02-24-2007, 12:33 PM
Um, I don't see how that might work, let me be more specific: I have a toolbar in a DIV with a draggable region that responds to onmousedown and onmouseup. problem is that when I click on that region to move the toolbar, input fields on the page lose focus, which is totally unwanted. Since it's an image, it doesn't take focus or have an onfocus event, it's just that I'm clicking outside the active input and that takes away focus.

BarrMan
02-24-2007, 02:02 PM
Hey, try running this onload:

var x = document.getElementsByTagName("input");
for(var i=0;i<x.length;i++)
x[i].onclick=function(){focusedObj=this.name;};
focusedObj is a global variable and then whenever you drag the toolbar and lose the focus of an obj, just do:

focusedObj.focus();

dinu
02-24-2007, 02:15 PM
Yea, that might work, with a little tweaking. Thought there was a more standard way to do this. Now I have another problem: When dragging the toolbar, if I move the mouse faster than the toolbar position updates, I get IE selecting portions of the page (such as doing a regular click-n-drag). Any idea how to fix this?

BarrMan
02-24-2007, 02:21 PM
I'm not really sure what the code looks like so I can't know what methods you've used that might cause this.
If you post some of your code I might be able to.

dinu
02-24-2007, 03:20 PM
<div style="position:absolute; left:0px; top:0px; display:inline; width:auto" id="edit_div">
<table cellspacing="0" cellpadding="0" border="0" style="width:auto">
<tr height="23" id="edit_bar">
<td width="23" height="23"><img src="Templates/Cpage/default/en/images/edit_tl.gif"></td>
<td width="100%">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="23">
<tr height="23">
<td width="50%" height="23" style="background:url(Templates/Cpage/default/en/images/edit_bar.gif)">&nbsp;</td>
<td width="38" height="23"><img src="Templates/Cpage/default/en/images/edit_title.gif"></td>
<td width="50%" height="23" style="background:url(Templates/Cpage/default/en/images/edit_bar.gif)">&nbsp;</td>
</tr>
</table>
</td>
<td width="24" height="23"><img src="Templates/Cpage/default/en/images/edit_tr.gif"></td>
</tr>
<tr>
<td width="23" style="background:url(Templates/Cpage/default/en/images/edit_l.gif)"></td>
<td style="background-color:#f7fafd">
<div id="smartEditorToolbarArea"></div>
</td>
<td width="24" style="background:url(Templates/Cpage/default/en/images/edit_r.gif)"></td>
</tr>
<tr height="19">
<td width="23" height="19"><img src="Templates/Cpage/default/en/images/edit_bl.gif"></td>
<td width="100%" height="19" style="background:url(Templates/Cpage/default/en/images/edit_b.gif)"></td>
<td width="24" height="19"><img src="Templates/Cpage/default/en/images/edit_br.gif"></td>
</tr>
</table>
</div>
<script language="javascript">
//
//
//

function MouseDown(e)
{
if (isMozilla) {
objDiv = document.getElementById('edit_div');
X=e.layerX;
Y=e.layerY;
return false;
}
else {
objDiv = document.getElementById('edit_div');
X=event.screenX;
Y=event.screenY;
}
}


//
//
//
function MouseMove(e)
{
if (objDiv) {
if (isMozilla) {
objDiv.style.top = (e.pageY-Y) + 'px';
objDiv.style.left = (e.pageX-X) + 'px';
return false;
}
else
{
objDiv.style.left = (event.screenX-X + objDiv.offsetLeft)+'px';
objDiv.style.top = (event.screenY-Y + objDiv.offsetTop)+'px';
X=event.screenX;
Y=event.screenY;
return false;
}
}
}

//
//
//

function MouseUp(e){
objDiv=null;
}


//
//
//
var isMozilla = (document.all) ? 0 : 1;

if (isMozilla)
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}

var objDiv=null;
var X=0;
var Y=0;
document.getElementById('edit_bar').onmousedown = MouseDown;
document.onmousemove = MouseMove;
document.onmouseup = MouseUp;


</script>

BarrMan
02-24-2007, 03:39 PM
I tried running the script and it didn't select anything when I moved the mouse very quickly.

dinu
02-24-2007, 03:45 PM
It happens when the contents of the toolbar are large and updating doesn't happen instantly. In this case, the mouse will hover over the document and select what regions it hovers onto.

MikeFoster
02-24-2007, 04:18 PM
Your listeners need to cancel the default action. For reference: xPreventDefault (http://cross-browser.com/x/lib/view.php?sym=xPreventDefault), xEnableDrag (http://cross-browser.com/x/lib/view.php?sym=xEnableDrag).

dinu
02-24-2007, 11:45 PM
It's no good. Actually if you go to http://cross-browser.com/x/examples/drag1.php and drag the windows around in a fury, the background document will get selected.

MikeFoster
02-25-2007, 02:23 AM
Hmm. For me, no text selection in Opera nor FF. There was text selection in IE, but only after dragging across the adsense iframe.

At any rate, canceling the default action (and maybe even stopping propagation) was just a suggestion - you don't have to try it.

dinu
02-25-2007, 02:59 PM
I tried it, but in IE it's messy as hell. I think I'll never get this thing going.

Vladdy
02-25-2007, 05:30 PM
Here is a simple fix (since you do not care if form elements lose focus during dragging action):
Intercept onblur event.
In the function that processes onblur: if objDiv in not null (you are dragging between mousedown and mouseup events) save the onblur target (the element that just lost focus) in a global variable
In your mouseup event, set focus back to the element that lost it during dragging action

MikeFoster
02-26-2007, 04:25 PM
Trying to prevent text selection while dragging has always been difficult.

If you are only having a problem in IE then try canceling the default action in an ondragstart (http://msdn.microsoft.com/workshop/author/dhtml/reference/events/ondragstart.asp) event listener (IE specific).

Also, Vladdy has some great ideas.

vwphillips
02-26-2007, 04:34 PM
function zxcMseDown(event,obj) {
.........
document.onselectstart=function(event){window.event.returnValue=false; }
.........
}

function zxcMseUp(event) {
........
document.onselectstart=null;
.......
}

may help

dinu
02-27-2007, 07:07 PM
Thanks guys for all the help, finally after a lot of bashing my keyboard against the wall I learned:

- In IE no matter what you do, if the draggable element is an empty cell (such as <td style="background:..."></td>) you get in trouble. Underlying layers get selected and all the nasty bits. As soon as you move the background into the <td> (<td><img src="..."></td>) everything works smoothly. Same applies for all block elements, DIV, etc. If it's empty, don't try to drag it.

- There is such thing as a property called UNSELECTABLE (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/unselectable.asp) that did the work for me in a very simple manner. Micro$ don't provide any versioning information so I'm not sure if it'll work in IE4 tho :cool:

Thanks again, if anyone is interested I can post the working code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum