Drag and drop only works in Safari

[samvermette]

Hello all,

I'm kinda new to JS but I managed to create a script where a submitted image is displayed, along with a semi-transparent zone that can be dragged. The purpose of the script is to let the user choose which zone of the image he wants to capture.

 

Anyways, I'm having a hard time trying to find why the script only works in Safari (I've tried IE, FireFox, Camino - none of them works: the "moveme" image can not be dragged at all). Could someone point me out why this script doesn't work in those browsers?

 

mouseover=true
var imagew=<?php echo $newwidth; ?>;
var imageh=<?php echo $newheight; ?>;
window.resizeTo(imagew,imageh+62);

function coordinates() {
mouseover=true
pleft=document.getElementById('moveMe').style.pixelLeft
ptop=document.getElementById('moveMe').style.pixelTop
xcoor=event.clientX
ycoor=event.clientY
document.onmousemove=moveImage
}

function moveImage() {
if (mouseover&&event.button==1) {
document.getElementById('moveMe').style.pixelLeft=pleft+event.clientX-xcoor
document.getElementById('moveMe').style.pixelTop=ptop+event.clientY-ycoor
}
}

function mouseup() {
mouseover=false

if(pleft+event.clientX-xcoor < 0 || pleft+event.clientX-xcoor+800 > imagew) {
document.getElementById('moveMe').style.pixelLeft=0
document.coords.srcx.value=0 }	
else { document.coords.srcx.value=pleft+event.clientX-xcoor }

if(ptop+event.clientY-ycoor < 0) {
document.getElementById('moveMe').style.pixelTop=0
document.coords.srcy.value=0 }	
else { document.coords.srcy.value=ptop+event.clientY-ycoor }

if(ptop+event.clientY-ycoor+115 > imageh) {
document.getElementById('moveMe').style.pixelTop=imageh-115
document.coords.srcy.value=imageh-115 }
else { document.coords.srcy.value=ptop+event.clientY-ycoor }	
}

 

And the HTML code:

 

<img id="moveMe" class=zone border=0 onmousedown="coordinates()" onmouseup="mouseup()">
<img class="image" src="<?php echo $image_path; ?>">

 

Thanks a lot!

[tomfmason]

Here is a cross browser drag and drop. You will need to give the element to be dragged  the class name draggable.

 

 

// start dragging
function startDrag(e){
// determine event object
if(!e){var e=window.event};
// determine target element
var targ=e.target?e.target:e.srcElement;
var cname = targ.className;
if(targ.className!='draggable'){return};
// calculate event X,Y coordinates
    offsetX=e.clientX;
    offsetY=e.clientY;
// assign default values for top and left properties
if(!targ.style.left){targ.style.left='0px'};
if(!targ.style.top){targ.style.top='0px'};
// calculate integer values for top and left properties
    coordX=parseInt(targ.style.left);
    coordY=parseInt(targ.style.top);
    drag=true;
// move div element
    document.onmousemove=dragDiv;
}
// continue dragging
function dragDiv(e){
if(!drag){return};
if(!e){var e=window.event};
var targ=e.target?e.target:e.srcElement;
// move div element
   targ.style.left=coordX+e.clientX-offsetX+'px';
   targ.style.top=coordY+e.clientY-offsetY+'px';
   return false;
}
// stop dragging
function stopDrag(){
drag=false;
}
window.onload=function(){
document.onmousedown=startDrag;
document.onmouseup=stopDrag;
}

 

Hope that helps,

Tom

[tomfmason]

I forgot to mention that the div's position needs to be set to relative.

[samvermette]

Do I have to set onclick() event on the image that is draggable or do I just set class=draggable?

And what do you mean div has to be relative, I just declare the div tag to position: relative in my CSS part?

[samvermette]

Ok so I got it working in both Safari and Firefox, however there are a few con:

https://www.monpetitcochon.com/tools/test.php

 

Here when I start to drag the zone it highlights the original zone where it is

Sometimes when I drag the zone outside the window, then I bring my cursor back, it drags the bg image instead.

 

Any hint?

[tomfmason]

No I meant the element that is to be dragged needs to have the className draggable and it's position needs to be set to relative. I followed your link and you have it setup weird. You background image comes after the draggable image. I would personally just have a div with the background-image set to your image. And then do something like this.

 

<div style="background-image:url(path/to/image);">
<img src="path/to/image.ext" class="draggable" />
</div>

[samvermette]

Ok I did that and it does not work in Firefox:

https://www.monpetitcochon.com/tools/test.php

[tomfmason]

That is because you have the class defined as draggable in the style tag and it should be .draggable. Here try this.

 

the style

.draggable{position: relative;}

 

The html

 

<div style="background-image:url(http://www.monpetitcochon.com/images/banners/1/74_temp.jpg); height:600; width:800;">
  <img src="http://www.monpetitcochon.com/images/transparent.png" width="800" height="115" border="1" class="draggable">
</div>

 

I tested this and it works fine.. Also I would not use transparent pngs. That image is solid white in IE. Maybe gif would be better.

[samvermette]

It only drags about 1-2px at a time (every time I click and drag).

I'm on FireFox on Mac OS X.

I found another script that seems to be working very well in any browser:

https://www.monpetitcochon.com/tools/test2.php

[tomfmason]

OK I give up. I tried and seems as if you want someone to completely write it for you and I am not that person.

 

Good luck,

Tom

[samvermette]

I litteraly copy pasted the code you gave me in your last post, and it gave me this:

http://monpetitcochon.com/tools/test.php

 

I don't know about you, but over here (in both Safari and Firefox) it drags but get stucked once in a while, then I have to grab the zone again. So it doesn't really work as it should. Thanks a lot for your help tho.