View Full Version : mouse focus
FJbrian
07-15-2002, 11:38 PM
not sure I'm using the right term, object selected?
http://www.footballjoint.com/Teams/CS/dragger.htm
I have a simple drag and drop script there
(Page has over 200 very tiny images)
it drags and drops fine
once I scroll down though, it goofs it up.
After scrolling, whatever I drag appears about 1-200 pixels above the cursor. Any idea of how to fix or cope with this?
Vladdy
07-15-2002, 11:55 PM
Add
document.body.scrollLeft
document.body.scrollTop
to e.clientX and e.clientY in IE (where e is the event object passed to onmouseover function)
Use
e.pageX and e.pageY in gekko browsers...
NS4.0 - don't know - never bother to make things work for this dinosaur..
FJbrian
07-15-2002, 11:59 PM
as I said there's 200 tiny images so I snipped the beggining and end of the source code
here:
#picture247 {position:absolute; left:100; top:100; z-index:0}
#picture248 {position:absolute; left:100; top:1880; z-index:0}
#picture249 {position:absolute; left:100; top:1900; z-index:0}
#picture250 {position:absolute; left:0; top:10; z-index:0}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init2() {
if (ns4) {document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=mousemove;
}
function mousemove(e) {
if (ns4) {var mouseX=e.pageX; var mouseY=e.pageY}
if (ie4) {var mouseX=event.x; var mouseY=event.y}
status="x= "+mouseX+", y= "+mouseY;
}
var isNav, isIE
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}
function shiftTo(obj, x, y) {
if (isNav) {
obj.moveTo(x,y)
} else {
obj.filter = "invert()"
obj.pixelLeft = x
obj.pixelTop = y
}
}
var selectedObj
var offsetX, offsetY
function setSelectedElem(evt) {
if (isNav) {
var testObj
var clickX = evt.pageX
var clickY = evt.pageY
for (var i = document.layers.length - 1; i >= 0; i--) {
testObj = document.layers[i]
if ((clickX > testObj.left) &&
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height)) {
selectedObj = testObj
setZIndex(selectedObj, 100)
return
}
}
} else {
var imgObj = window.event.srcElement
if (imgObj.parentElement.id.indexOf("picture") != -1) {
selectedObj = imgObj.parentElement.style
setZIndex(selectedObj,100)
return
}
}
selectedObj = null
return
}
function dragIt(evt) {
if (selectedObj) {
if (isNav) {
shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
} else {
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
return false
}
}
}
function engage(evt) {
setSelectedElem(evt)
if (selectedObj) {
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
} else {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
return false
}
function release(evt) {
if (document.all) {selectedObj.filter = ""}
if (selectedObj) {
setZIndex(selectedObj, 0)
selectedObj = null
}
}
function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}
function init() {
if (isNav) {
setNavEventCapture()
}
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
}
</SCRIPT>
</HEAD>
<BODY onLoad="init2()"bgcolor="#ffffff" OnBlur="init()">
<DIV ID=picture1><IMG NAME="picturePic1" SRC="mfaulk.jpg" border="1"></DIV>
<DIV ID=picture2><IMG NAME="picturePic2" SRC="kwarner.jpg" border="1"></DIV>
<DIV ID=picture3><IMG NAME="picturePic3" SRC="rmoss.jpg" border="1"></DIV>
<DIV ID=picture4><IMG NAME="picturePic4" SRC="ahgreen.jpg" border="1"></DIV>
Vladdy
07-16-2002, 12:03 AM
Thanks, dug it out from your source and changed my original reply... your code should work fine in NS as is
FJbrian
07-16-2002, 12:05 AM
what about IE???????
any ideas?
Vladdy
07-16-2002, 12:10 AM
Add
document.body.scrollLeft
document.body.scrollTop
to e.clientX and e.clientY in IE (where e is the event object passed to onmouseover function)
FJbrian
07-16-2002, 12:23 AM
to my "dragit" function?
FJbrian
07-16-2002, 01:59 AM
vladdy,
I have no clue where to put it, please help
Vladdy
07-16-2002, 03:08 AM
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) in dragIt change to
shiftTo(selectedObj, (window.event.clientX + document.body.scrollLeft
- offsetX), (window.event.clientY + document.body.scrollTop
- offsetY))
... I think... this code can be 3 times shorter if you needed to support only DOM compliant browsers.... phew...
FJbrian
07-16-2002, 03:37 AM
THANK YOU VLADDY!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.