...

View Full Version : Firefox and Chrome difficulty



anotherJEK
03-25-2012, 07:24 PM
Hello again;

I am testing in Firefox( two versions ), Chrome, Opera (two versions), Safari
on Mac OSX and am seeing a peculiarity.


<div id="dialog" style="position:absolute;top:50px;left:600px;">
<div id="head"><p id="panelTitle">Item Info:</p></div>
<p>Drag this panel to move </p>
<pre id="target1"><img id="srcImg" src="windows/img/front_window.jpg" alt="test" /></pre>
<pre id="target2"> </pre>
<div id="closer"><p class="dialog"><a id="dClose" href="javascript:">Close</a></p></div>


event listener assigned to a separate anchor tag makes this markup visible and drag-able.
The mousemove event listener for dragging is assigned to the parent div, id='dialog'

In Firefox and Google's Chrome browser, if I mousedown on the image
and try to drag, the system tries to move and copy the image. When I
release the mouse, the whole panel sticks to the pointer and moves with
the pointer until I click on it.

The Question:
What event would I do preventDefault, cancelbubble, or return false
to get around this?
(perhaps for a separate post, how would I prevent the client form copying
content?)

Safari will do the same accept that it will not stick to the mouse pointer position on mouseup.

In Opera, it works fine (accept the earlier verison, v9x leaves a trail of ghost lines where the panel was moved from)

I have a pc with I.E. and have not yet tested this specific issue.

Thank you for your time and attention
JK

glenngv
03-26-2012, 05:21 AM
Can you post the related js?

anotherJEK
03-27-2012, 06:16 PM
function dragElement()
{
this.group = '';
this.setGroup = function(grp)
{
// set group to prep for
this.group = grp;
}
this.object = new Object();
this.findObj = function(objId, objLst)
{
/*
the object is to search the department inventory database for the object with matching id property
*/
for(var i = 0; i < objLst.length; i++ )
{
if(objLst[i].id == objId)
{
this.object = objLst[i];
break;
}
}
}

this.drag = function(target, event)
{
//var elementToDrag = document.getElementById(elementToDrag)// will not work when called from sourced js file in Firefox
var deltaX = event.clientX - parseInt(target.style.left);
var deltaY = event.clientY - parseInt(target.style.top);
if(document.addEventListener)
{
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true)
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove", moveHandler);
document.attachEvent("onmouseup", upHandler);
}
else
{
var oldmovehandler = document.onmousemove;
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
}
if(event.stopPropagation)
{
event.stopPropagation;
}
else
{
event.cancelBubble = true;
}
if(event.preventDefault)
{
event.stopPropagation;
}
else
{
event.returnValue = false;
}
function moveHandler(e)
{
if(!e)
{
e = window.event;
}
target.style.left = (e.clientX - deltaX) + "px";
target.style.top = (e.clientY - deltaY) + "px";
if(e.stopPropagation)
{
e.stopPropagation;
}
else
{
e.cancelBubble = true;
}
}
function upHandler(e)
{
if(!e)
{
e = window.event;
}
if(document.removeEventListener)
{
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if(document.detachEvent)
{
document.detachEvent("onmouseup", upHandler)
document.detachEvent("onmousemove", moveHandler)
}
if(e.stopPropagation)
{
e.stopPropagation
}
else
{
e.cancelBubble = true;
}
}
}

this.eventLst = new Array();
this.init = function(IDLST)
{
var panel = document.getElementById('dialog');
var src = document.getElementById('srcImg');
for(var i = 0; i < IDLST.length; i++ )
{
this.eventLst[i] = document.getElementById(IDLST[i]);
if(document.addEventListener)
{
this.eventLst[i].addEventListener('click', function(e){ showObj(panel, src, e, _DIALOG); }, false);
}
else if(window.attachEvent)
{
this.eventLst[i].attachEvent('onclick', function(e){ showObj(panel, src, e, _DIALOG); });
}
}
var showObj = function(panel, src, e, _DIALOG)
{
var subject= '';
if(e.srcElement)
{
subject = e.srcElement;
}
else if(e.target)
{
subject = e.target;
}
_DIALOG.findObj(subject.id, _DIALOG.group );
var txt = document.getElementById('target2');
txt.childNodes[0].data = _DIALOG.object.ref;
panel.style.top = (parseInt(e.screenY) - 300)+'px';
panel.style.visibility = 'visible';
src.setAttribute('src', subject.src);
var wid = parseInt(_DIALOG.object.width);
if(wid < 180)
{
_DIALOG.object.width = '180';
}
panel.style.width = parseInt(_DIALOG.object.width)+7+'px';
panel.style.maxWidth = parseInt(_DIALOG.object.width)+7+'px';
}

var test = document.getElementById('dShow');
var handle = document.getElementById('head');
var close = document.getElementById('dClose');
if(document.addEventListener)
{
panel.addEventListener('mousedown', function(e){ _DIALOG.drag(panel, e); }, false);
close.addEventListener('click', function(){ _DIALOG.close() }, false);
close.addEventListener('mouseover', function(){ close.style.background = '#000066'; close.style.borderColor = '#cccccc' }, false);
close.addEventListener('mouseout', function(){ close.style.background = '#000033'; close.style.borderColor = '#000033' }, false);
}
else if(window.attachEvent)
{
panel.attachEvent('onmousedown', function(e){ _DIALOG.drag(panel, e); } );
close.attachEvent('onclick', function(){ _DIALOG.close() } );
close.attachEvent('onmouseover', function(e){ e.srcElement.style.background = '#000066'; e.srcElement.style.borderColor = '#cccccc' } );
close.attachEvent('onmouseout', function(e){ e.srcElement.style.background = '#000033'; e.srcElement.style.borderColor = '#000033' } );
}
}

this.close = function()
{
var target = document.getElementById('dialog');
target.style.visibility = 'hidden';
var handle = document.getElementById('head');
var close = document.getElementById('dClose');
if(document.removeEventListener)
{
handle.removeEventListener('mousedown', function(e){ _DIALOG.drag(target, e); }, false);
close.removeEventListener('click', function(e){ target.style.visibility = 'hidden' }, false);
close.removeEventListener('mouseover', function(){ close.style.background = '#000066'; close.style.borderColor = '#cccccc' }, false);
close.removeEventListener('mouseout', function(){ close.style.background = '#000033'; close.style.borderColor = '#000033' }, false);
}
else if(document.detachEvent)
{
handle.detachEvent('onmousedown', function(e){ _DIALOG.drag(target, e); } );
close.detachEvent('onclick', function(){ target.style.visibility = 'hidden' } );
close.detachEvent('onmouseover', function(){ close.style.background = '#000066'; close.style.borderColor = '#cccccc' } );
close.detachEvent('onmouseout', function(){ close.style.background = '#000033'; close.style.borderColor = '#000033' } );
}
}

this.imgList = new Array();
this.preload = function(a)
{
for(var i = 0; i < a.length; i++)
{
this.imgList[i] = new Image();
this.imgList[i].src = a[i];
}
}
}


var _DIALOG = new dragElement();



then in main page:


var _self = 'index.php';
var _loaded = 'port';
var navIdList = new Array();
navIdList[0] = 'Lamps';
navIdList[1] = 'Windows';
navIdList[2] = 'Anonymous Collection';


var group = lamps; // determined by php


window.onload = function()
{
navElement.init();
NAV_EVENTS.setEvents(navIdList);
_DIALOG.preload(srcLst);
_DIALOG.setGroup(group);
_DIALOG.init(idLst);
}

// idLst and srcLst are in a separate, sourced js file determined by php
// according to the subhead selection by the user.

I am listed as a beginning coder. That is the decision made by this forum.
In fact, I have been doing javascript and php since around 2003, but not
as a payed employee. I have done my own web sites and some for others.
This is for a stained glass artist.

Note about drag code: It is virtually quoted from O'reilly text:
Javascript, The Definitive Guide, 5th Ed.
(theirs was not wrapped in object constructor code as mine is).

anotherJEK
03-27-2012, 08:46 PM
to the _DIALOG.init() method I add the following code


// where 'src' is the image tag
if(document.addEventListener)
{
src.addEventListener('mousedown', function(e){ e.preventDefault(); e.cancelBubble; }, false);
}
else if(document.attachEvent)
{
// changed to :
src.attachEvent('mousedown', function(e){ return false });
// src.attachEvent('onmousedown', function(e){ return false });
// src.attachEvent('mousedown', function(e){ e.returnValue = false });
// still no cigar
}



I was having similar problems with IE.
Waiting for pc to boot up to test on IE......... Nope, don't have the
right syntax there, yet....

the closest I can get in I.E. is e.cancelBubble. That prevents the dialog panel from being dragged at all
if the user clicks in the visible image area.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum