Forum PHP.pl > [JavaScript]mousemove- down/up

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]mousemove- down/up

Kloc

20.04.2014, 20:29:15

Witajcie. Mam skrypt, który pokazuje mi aktualną pozycję kursora w divie.

[HTML] pobierz, plaintext 
<script>
$( "#div" ).mousemove(function( event ) {
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  document.getElementById("obiekt").style.left=event.pageX+"px";
  document.getElementById("obiekt").style.top=event.pageY+"px";
});
</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.

trueblue

20.04.2014, 21:41:59

Jeśli chcesz ustawiać div podczas poruszania myszą, ale tylko z przyciśniętym lewym przyciskiem, to:

[HTML] pobierz, plaintext 
$( "#div" ).mousemove(function( event ) {
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
    if(event.which==1){
  document.getElementById("obiekt").style.left=event.pageX+"px";
  document.getElementById("obiekt").style.top=event.pageY+"px";
    }
});
[HTML] pobierz, plaintext

Kloc

21.04.2014, 14:40:04

Chcę zrobić takie coś jak dodawanie zdjęć na tablica-olx

, ż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 
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
			<style>
				div{
					width: 100%;
					height: 500px;
					background: yellow;
					border: 2px solid;
					float: left;
					position:relative;
				}
 
				#obiekt{
					clear:both;
					width: 220px;
					height: 170px;
					background: red;
					position:absolute; left:0px; top:0px;
					cursor:move;
				}
				.pos{
				float:left;
				position:relative; left:0px; top:0px;
				width: 100px;
				height: 50px;
				background:green;
				}
		  </style>
 
		<script src="jquery.js"></script> <!-- lub: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->
	</head>
<body>
 
<div id="div"></div>
<div id="positionLeft" class="pos"></div>
<div id="positionTop" class="pos"></div>
 
<script>
function dzialaj(status){
	$( "#div" ).mousemove(function( event ) {
	  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
	  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
	  if(status==1){
		if(event.which==1){
	      document.getElementById("obiekt").style.left=event.pageX+"px";
	      document.getElementById("obiekt").style.top=event.pageY+"px";
		  document.getElementById("positionLeft").innerHTML=event.pageX+"px";
		  document.getElementById("positionTop").innerHTML=event.pageY+"px";
		 }
	  }
	  else{
		  document.getElementById("obiekt").style.left=$( "#positionLeft" ).text()+"px";
	      document.getElementById("obiekt").style.top=$( "#positionTop" ).text()+"px";
	  }
	});
}
</script>
 
<div id="obiekt" onmousedown="dzialaj(1)" onmouseup="dzialaj(0)"></div>
 
</body>
</html>		
[HTML] pobierz, plaintext

Coś mniejwięcej w tym stylu chcę zrobić. Nie szukam gotowców.

trueblue

21.04.2014, 16:30:35

Poszukaj o drag and drop.

Kloc

21.04.2014, 18:14:04

Właśnie o coś takiego mi chodziło

, dzięki

Zrobiłem tak jak w poradniku

[HTML] pobierz, plaintext 
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid black;}
#div2 {width:350px;height:70px;padding:10px;border:1px solid black;}
#div3 {width:350px;height:70px;padding:10px;border:1px solid black;}
#div4 {width:350px;height:70px;padding:10px;border:1px solid black;}
</style>
<script>
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
ev.preventDefault();
data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
 
function allowDrop(ev)
{
ev.preventDefault();
}
</script>
</head>
<body>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img id="drag1" src="http://th.interia.pl/51,b38363ff94873696/zima-slonce-drzewa.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
	<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">
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 
</body>
</html>
 
[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ć?

Kloc

22.04.2014, 16:59:07

A jak mogę pobrać id diva na który element został opuszczony

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.