Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]mousemove- down/up
-Kloc-
post
Post #1





Goście
Witajcie. Mam skrypt, który pokazuje mi aktualną pozycję kursora w divie. 
[HTML] pobierz, plaintext 
  1. <script>
  2. $( "#div" ).mousemove(function( event ) {
  3.   var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  4.   var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  5.   document.getElementById("obiekt").style.left=event.pageX+"px";
  6.   document.getElementById("obiekt").style.top=event.pageY+"px";
  7. });
  8. </script>
[HTML] pobierz, plaintext


I szukam czegoś co będzie działać tylko gdy klawisz myszy jest aktywny/nie aktywny coś w stylu onmousedown/onmouseup.
Po zastąpieniu tymi powyżej mousemove skrypt nie działa. Jak wstawię np takie mousedown/mouseup, to jest ok, ale mi potrzeba gdy jest wciśnięty.
Go to the top of the page
+Quote Post
trueblue
post
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Jeśli chcesz ustawiać div podczas poruszania myszą, ale tylko z przyciśniętym lewym przyciskiem, to:
[HTML] pobierz, plaintext 
  1. $( "#div" ).mousemove(function( event ) {
  2.   var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  3.   var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  4.     if(event.which==1){
  5.   document.getElementById("obiekt").style.left=event.pageX+"px";
  6.   document.getElementById("obiekt").style.top=event.pageY+"px";
  7.     }
  8. });
[HTML] pobierz, plaintext


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
-Kloc-
post
Post #3





Goście
Chcę zrobić takie coś jak dodawanie zdjęć na tablica-olx biggrin.gif, że łapię sobie zdjęcie i je przenoszę na do kosza lub do folderu, tylko coś mi nie wychodzi :/
Przesuwając diva on się tak jakby zacina, a tam jest płynnie to zrobione. No i chcę żeby on się przesówał tylko jak go złapię i ciągne z wciśniętym klawiszem, a jak puszczę to wraca na swoje miejsce. Ale gdzie kolwiek nacisnę i ruszę myszką to on się przesówa. To co na razie zrobiłem. Jakieś pomysły podpowiedzi mile widziane.

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html lang="en">
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 			<style>
  6. 				div{
  7. 					width: 100%;
  8. 					height: 500px;
  9. 					background: yellow;
  10. 					border: 2px solid;
  11. 					float: left;
  12. 					position:relative;
  13. 				}
  14.  
  15. 				#obiekt{
  16. 					clear:both;
  17. 					width: 220px;
  18. 					height: 170px;
  19. 					background: red;
  20. 					position:absolute; left:0px; top:0px;
  21. 					cursor:move;
  22. 				}
  23. 				.pos{
  24. 				float:left;
  25. 				position:relative; left:0px; top:0px;
  26. 				width: 100px;
  27. 				height: 50px;
  28. 				background:green;
  29. 				}
  30. 		  </style>
  31.  
  32. 		<script src="jquery.js"></script> <!-- lub: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->
  33. 	</head>
  34. <body>
  35.  
  36. <div id="div"></div>
  37. <div id="positionLeft" class="pos"></div>
  38. <div id="positionTop" class="pos"></div>
  39.  
  40. <script>
  41. function dzialaj(status){
  42. 	$( "#div" ).mousemove(function( event ) {
  43. 	  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  44. 	  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  45. 	  if(status==1){
  46. 		if(event.which==1){
  47. 	      document.getElementById("obiekt").style.left=event.pageX+"px";
  48. 	      document.getElementById("obiekt").style.top=event.pageY+"px";
  49. 		  document.getElementById("positionLeft").innerHTML=event.pageX+"px";
  50. 		  document.getElementById("positionTop").innerHTML=event.pageY+"px";
  51. 		 }
  52. 	  }
  53. 	  else{
  54. 		  document.getElementById("obiekt").style.left=$( "#positionLeft" ).text()+"px";
  55. 	      document.getElementById("obiekt").style.top=$( "#positionTop" ).text()+"px";
  56. 	  }
  57. 	});
  58. }
  59. </script>
  60.  
  61. <div id="obiekt" onmousedown="dzialaj(1)" onmouseup="dzialaj(0)"></div>
  62.  
  63. </body>
  64. </html>		
[HTML] pobierz, plaintext


Coś mniejwięcej w tym stylu chcę zrobić. Nie szukam gotowców.
Go to the top of the page
+Quote Post
trueblue
post
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Poszukaj o drag and drop.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
-Kloc-
post
Post #5





Goście
Właśnie o coś takiego mi chodziło biggrin.gif, dzięki biggrin.gif

Zrobiłem tak jak w poradniku

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <style>
  5. #div1 {width:350px;height:70px;padding:10px;border:1px solid black;}
  6. #div2 {width:350px;height:70px;padding:10px;border:1px solid black;}
  7. #div3 {width:350px;height:70px;padding:10px;border:1px solid black;}
  8. #div4 {width:350px;height:70px;padding:10px;border:1px solid black;}
  9. </style>
  10. <script>
  11. function drag(ev)
  12. {
  13. ev.dataTransfer.setData("Text",ev.target.id);
  14. }
  15.  
  16. function drop(ev)
  17. {
  18. ev.preventDefault();
  19. data=ev.dataTransfer.getData("Text");
  20. ev.target.appendChild(document.getElementById(data));
  21. }
  22.  
  23. function allowDrop(ev)
  24. {
  25. ev.preventDefault();
  26. }
  27. </script>
  28. </head>
  29. <body>
  30.  
  31. <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  32. 	<img id="drag1" src="http://th.interia.pl/51,b38363ff94873696/zima-slonce-drzewa.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
  33. </div>
  34. <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
  35. 	<img id="drag2" src="http://www.tapeta-polna-lato-aka-droga.na-pulpit.com/zdjecia/polna-lato-aka-droga.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
  36. </div>
  37. <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  38. <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  39.  
  40. </body>
  41. </html>
  42.  
[HTML] pobierz, plaintext


I wszystko działa jak powinno, lecz mam jeden minus gdy złapie jedno zdjęcie i je upuszczę na obszar drugiego zdjęcia to ono się chowa, a gdy obok (do diva) to są 2 elementy w jednym. Ja chciałbym takie zabezpieczenie zrobić że może być tylko 1 element. Jak opuszczam nowe zdjęcie to ono nie znika tylko wywala stare do diva obok czy gdzieś tam. Da się coś takiego zrobić?
Go to the top of the page
+Quote Post
-Kloc-
post
Post #6





Goście
A jak mogę pobrać id diva na który element został opuszczony questionmark.gif
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 09:48
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn