Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Drag and drop the image!

Reply
Thread Tools

Drag and drop the image!

 
 
yihan
Guest
Posts: n/a
 
      01-12-2004
Hi,
I made a program to drag and drop the image using mouseevent, it only works
on IE well, not on Netscape. Does anyone has the example suitable for
Netscape? Please help. Thank you very much.

yihan


 
Reply With Quote
 
 
 
 
Fabian
Guest
Posts: n/a
 
      01-12-2004
yihan hu kiteb:

> Hi,
> I made a program to drag and drop the image using mouseevent, it only
> works on IE well, not on Netscape. Does anyone has the example
> suitable for Netscape? Please help. Thank you very much.


Can you show us the code? It might only require minor tweaking to fit.
And its something I want to do for one of my own projects too. You
wouldn't want to save me loads of time would you


--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

 
Reply With Quote
 
 
 
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      01-12-2004
"Fabian" <(E-Mail Removed)> writes:

> yihan hu kiteb:
>> I made a program to drag and drop the image using mouseevent,


> Can you show us the code? It might only require minor tweaking to fit.
> And its something I want to do for one of my own projects too. You
> wouldn't want to save me loads of time would you


Very simple example (dragging, no effect on dropping):
---
<script type="text/javascript">
function dragImg(img,evt,how) {
how = how || "relative";
img.style.position = how;
var root = document.documentElement || document.body;
var x = img.xPos || (how == "relative" ? 0 : img.offsetLeft);
var y = img.yPos || (how == "relative" ? 0 : img.offsetTop);
var mx = evt.pageX || evt.clientX + root.scrollLeft;
var my = evt.pageY || evt.clientY + root.scrollTop;
document.onmousemove = function (evt){
evt = evt || window.event;
var newmx = evt.pageX || evt.clientX + root.scrollLeft;
var newmy = evt.pageY || evt.clientY + root.scrollTop;
x += newmx - mx;
y += newmy - my;
mx = newmx;
my = newmy;
img.style.left = x+"px";
img.style.top = y+"px";
img.style.outline="2px solid gray";
img.style.zIndex = "1";
return false;
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
img.xPos = x;
img.yPos = y;
img.style.outline = img.style.zIndex = "";
return false;
}
return false;
}
</script>
---
with
---
<img src="..." onmousedown="return dragImg(this,event)">
---
or
---
<img src="..." style="position:absolute;"
onmousedown="return dragImg(this,event,'absolute')">
---

Good luck.
/L
--
Lasse Reichstein Nielsen - http://www.velocityreviews.com/forums/(E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Drag and Drop and Generate Graphic backstreetboy Java 0 10-22-2007 08:29 AM
Drag and Drop Tree and Form Submit wreed Javascript 5 04-17-2007 03:19 PM
Q:How to "drag and drop" jpg's into html and have the code write itself? mr_cross HTML 11 10-11-2006 10:27 PM
RubyDotNet and Drag and Drop Wayne Vucenic Ruby 3 09-28-2003 09:01 PM
Drag & Drop API: get source component in drop traget 'dragOver' Oliver Klein Java 0 08-24-2003 12:01 PM



Advertisments