Copy, Drag & drop

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
add_gr
Δημοσιεύσεις: 17
Εγγραφή: 02 Νοέμ 2002 21:47
Τοποθεσία: Athens, Galatsi

Copy, Drag & drop

Δημοσίευση από add_gr » 02 Νοέμ 2002 22:06

:question: Θα ήθελα να ρωτήσω αν έχει κανένας κάποιο JavaScript όπου θα φορτώνει 2 - 3 icons σε ένα μέρος της σελίδας (html) και ο χρήστης θα κάνει Copy, Drag & Drop κάποιου icon σε ένα άλλο σημείο της σελιδας.

Άβαταρ μέλους
grjava
Δημοσιεύσεις: 387
Εγγραφή: 13 Μαρ 2002 01:00
Τοποθεσία: athens
Επικοινωνία:

Copy, Drag & drop

Δημοσίευση από grjava » 04 Νοέμ 2002 03:00

Τοποθέτησε τον παρακάτω κώδικα στο <head>:

Κώδικας: Επιλογή όλων

<style>
<!--
.drag&#123;position&#58;relative;cursor&#58;hand&#125;
-->
</style>
<script language="JavaScript1.2">
<!--


var dragapproved=false
var z,x,y
function move&#40;&#41;&#123;
if &#40;event.button==1&&dragapproved&#41;&#123;
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
&#125;
&#125;
function drags&#40;&#41;&#123;
if &#40;!document.all&#41;
return
if &#40;event.srcElement.className=="drag"&#41;&#123;
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
&#125;
&#125;
document.onmousedown=drags
document.onmouseup=new Function&#40;"dragapproved=false"&#41;
//-->
</script>
και τον παρακάτω στο <body>:

Κώδικας: Επιλογή όλων

<img src="test.gif" class="drag"><br>
<img src="test2.gif" class="drag"><br>
όπου test.gif και test2.gif οι εικόνες σου. :wink:

Άβαταρ μέλους
add_gr
Δημοσιεύσεις: 17
Εγγραφή: 02 Νοέμ 2002 21:47
Τοποθεσία: Athens, Galatsi

Copy, Drag & drop

Δημοσίευση από add_gr » 04 Νοέμ 2002 18:36

Polu kalo alla den einai auto pou 8elw. Egw 8elw otan paei na kanei drag na kanei grenerate ena neo gif opou auto 8a metakinhte eno to arxiko 8a paramenei sthn artxikh tou 8esh..

Kalh prospa8eia alla dustixos den mou kanei. Exeis kamia nea idea?

Άβαταρ μέλους
grjava
Δημοσιεύσεις: 387
Εγγραφή: 13 Μαρ 2002 01:00
Τοποθεσία: athens
Επικοινωνία:

Copy, Drag & drop

Δημοσίευση από grjava » 05 Νοέμ 2002 01:14

Για όλα υπάρχει λύση.. Αντέγραψε αυτό τον κώδικα αντί του
<img src="test.gif" class="drag"><br>
<img src="test2.gif" class="drag"><br>

Κώδικας: Επιλογή όλων

<TABLE border="0">
  <TBODY>
    <TR>
      <TD background="test.gif"><img src="test.gif" class="drag"></TD>
    </TR>
    <TR>
      <TD background="test2.gif"><img src="test2.gif" class="drag"></TD>
    </TR>
  </TBODY>
</TABLE>
Με λίγα λόγια δημιουργείς tables με background το ίδιο γραφικό και τοποθετείς μέσα αυτό που θέλεις να γίνει drag.
Δες παράδειγμα εδώ:
http://grjava.com/test.htm

Άβαταρ μέλους
add_gr
Δημοσιεύσεις: 17
Εγγραφή: 02 Νοέμ 2002 21:47
Τοποθεσία: Athens, Galatsi

Copy, Drag & drop

Δημοσίευση από add_gr » 05 Νοέμ 2002 14:23

Mallon den egina katanohtos...
Opws eipa 8elw ka8e fora pou paei na kanei drag & drop apo thn arxikh 8esh kai mono apo ekei na dhmiourghtai kai ena kainourio element (gif).
:idea: Kati san to toolbar tou Microsoft Visio :idea:

Άβαταρ μέλους
Panos Galanis
Δημοσιεύσεις: 158
Εγγραφή: 09 Σεπ 2002 12:51
Τοποθεσία: Hamburg

Copy, Drag & drop

Δημοσίευση από Panos Galanis » 06 Νοέμ 2002 14:54

Δεν εχω ιδέα για το Μicrosoft Visio αλλα η Ιδεα για Drag & Drop + Copy ειναι καλη ....

Κώδικας: Επιλογή όλων

<HTML> 
<HEAD> 
<TITLE>Drag n Drop - Test</TITLE> 
<script type="text/javascript">
<!--
var ver=navigator.appVersion;
var dom=document.getElementById? true&#58;false;
var ie=&#40;ver.indexOf&#40;"MSIE"&#41;>-1&#41;? true&#58;false;
var ns=&#40;navigator.appName.indexOf&#40;"Netscape"&#41;>-1&#41;? true&#58;false;
var old=&#40;!dom && !ie&#41; ? true&#58;false;

var CID=null, drag=0, copy=0, xoff=0, yoff=0, xst=0, yst=0;

function move&#40;evt&#41;&#123;
	if &#40;CID&#41; &#123;
		var x=&#40;ie&#41;? event.clientX+document.body.scrollLeft &#58; evt.pageX;
		var y=&#40;ie&#41;? event.clientY+document.body.scrollTop &#58; evt.pageY;
		if &#40;!drag&#41;&#123;
			xst=parseInt&#40;CID.style.left&#41;;
			yst=parseInt&#40;CID.style.top&#41;;
			xoff=x - xst;
			yoff=y - yst;
			drag=1;
			//alert&#40;x&#41;;
			&#125;
		CID.style.left=&#40;x - xoff&#41;+'px';
		CID.style.top=&#40;y - yoff&#41;+'px';
		&#125;
	return false;
	&#125;

function keydown &#40;evt&#41; &#123;
	var no=&#40;ns&#41;? evt.which &#58; &#40;ie&#41;? window.event.keyCode &#58; 0;
	if &#40;no==17&#41; copy=1;
	&#125;

function keyup &#40;evt&#41; &#123;
	var no=&#40;ns&#41;? evt.which &#58; &#40;ie&#41;? window.event.keyCode &#58; 0;
	if &#40;no==17&#41; copy=0;
	&#125;

function dragme&#40;obj&#41; &#123;
	if &#40;drag||old&#41; return false;
	CID=obj;
	CID.src="closed.png";
	return false;
	&#125;

function dropme&#40;obj&#41; &#123;
	if &#40;old&#41; return false;
	if &#40;copy&#41; &#123;
		//alert&#40;"Copy element!"&#41;;
		var xnew=parseInt&#40;CID.style.left&#41;;
		var ynew=parseInt&#40;CID.style.top&#41;;
		var i = document.getElementsByTagName&#40;"img"&#41;.length;
		var nobj=document.createElement&#40;"img"&#41;;
		nobj.onmousedown=new Function&#40;"dragme&#40;this&#41;"&#41;;
		nobj.onmouseup=new Function&#40;"dropme&#40;this&#41;"&#41;;
		nobj.title="This is ID&#58;"+i;
		nobj.src="open.png";
		nobj.style.position="absolute";
		nobj.style.cursor="pointer";
		nobj.style.left=xnew + 'px';
		nobj.style.top=ynew + 'px';
		document.body.appendChild&#40;nobj&#41;;
		CID.style.left=xst+'px';
		CID.style.top=yst+'px';
		copy=0;
		&#125;
	CID.src="open.png";
	CID=null;
	drag=0;
	return false;
	&#125;

if &#40;!old&#41; &#123;
	document.onmousemove=move;
	document.onkeydown=keydown;
	document.onkeyup=keyup;
	&#125;
//-->
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF"> 
<P>This is a Drag n Drop Test. Use also Ctrl with Drop for Copying</P> 

<img src="open.png" onmousedown="dragme&#40;this&#41;;" onmouseup="dropme&#40;this&#41;;" style="position&#58;absolute; top&#58;100px; left&#58;100px; cursor&#58;pointer;">

</BODY>
</HTML>
Human beings, who are almost unique in having the ability to learn from the experience of others, are also remarkable for their apparent disinclination to do so. - Douglas Adams

Άβαταρ μέλους
add_gr
Δημοσιεύσεις: 17
Εγγραφή: 02 Νοέμ 2002 21:47
Τοποθεσία: Athens, Galatsi

Copy, Drag & drop

Δημοσίευση από add_gr » 06 Νοέμ 2002 18:44

To dokimasa alla mallon kapoio provlima uparxei. To aplo drag and drop to kanei alla otan paei na kanei kai to copy patontas to Ctrl xtupaei! Mhpws ftaiei o browser mou (IE6)? :question:

Άβαταρ μέλους
Panos Galanis
Δημοσιεύσεις: 158
Εγγραφή: 09 Σεπ 2002 12:51
Τοποθεσία: Hamburg

Copy, Drag & drop

Δημοσίευση από Panos Galanis » 07 Νοέμ 2002 10:28

add_gr έγραψε:To dokimasa alla mallon kapoio provlima uparxei. To aplo drag and drop to kanei alla otan paei na kanei kai to copy patontas to Ctrl xtupaei! Mhpws ftaiei o browser mou (IE6)? :question:
Δεν καταλαβα το _χτυπαει_ ετσι οπως ειναι δεν εχει προβλημα σε win2k box και με ΙΕ6 (6.0.2800.1106), Mozilla 1.1

Μπορει και καποιος αλλος να επιβεβαιωσει.. Θωμά?
Human beings, who are almost unique in having the ability to learn from the experience of others, are also remarkable for their apparent disinclination to do so. - Douglas Adams

Άβαταρ μέλους
grjava
Δημοσιεύσεις: 387
Εγγραφή: 13 Μαρ 2002 01:00
Τοποθεσία: athens
Επικοινωνία:

Copy, Drag & drop

Δημοσίευση από grjava » 08 Νοέμ 2002 01:01

Στην γραμμή κώδικα: var CID=null, drag=0, copy=0, xoff=0, yoff=0, xst=0, yst=0; δώσε τιμή copy=1 και πρέπει να γίνει προσεκτικά η αλλαγή του ονόματος της εικόνας (αν δεν κάνω λάθος το βρήκα σε 4 σειρές κώδικα και σε μία μάλιστα αναφερόταν αντί για open.png σαν close.png)
Δεν χρειάζεται να πατάς το ctrl για να αντιγράψει, απλώς όπου αφήσεις το ποντίκι κάνει copy. Πολύ καλό script...

Άβαταρ μέλους
Panos Galanis
Δημοσιεύσεις: 158
Εγγραφή: 09 Σεπ 2002 12:51
Τοποθεσία: Hamburg

Copy, Drag & drop

Δημοσίευση από Panos Galanis » 08 Νοέμ 2002 10:45

xmmm,

Χρησημοποιησα "open.png" και "closed.png" για το λογο οταν κανεις Drag η ιδια εικονα "open-book" να γινεται "closed-book". Μολις κανεις Drop η εικονα γινεται παλι "open-book".

Εαν κατα τη διαρκεια του Drop πατας και Ctrl *(Το copy παιρνει την τιμη "1") η εικονα ειναι πια η κοπια της αρχικης απο εκει που πρωτοεγινε το Drag. Δεν χρειαζεται να κανεις το copy=1 γιατι γινεται αυτο με το που πατας το Ctrl. Αν αφηνεις το Ctrl to copy παιρνει παλι την τιμη 0.

Ναι ξερω, θα επρεπε τα open.png kai closed.png να δινονται με variables στην αρχη του script ....

Κώδικας: Επιλογή όλων

var hover="closed.png";
var normal="open.png";
404 : should I fake it .... huh?!

Ευχαριστω Θωμά :D
Human beings, who are almost unique in having the ability to learn from the experience of others, are also remarkable for their apparent disinclination to do so. - Douglas Adams

Άβαταρ μέλους
add_gr
Δημοσιεύσεις: 17
Εγγραφή: 02 Νοέμ 2002 21:47
Τοποθεσία: Athens, Galatsi

Copy, Drag & drop

Δημοσίευση από add_gr » 10 Νοέμ 2002 04:41

Ok, paidia thanx. Ola einai enta3ei. Sas euxaristw para poly!!
:P

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες