Przesuwanie większego diva w mniejszym


(rycerz2000) #1

Nie bardzo wiem jak nazwać efekt o który mi chodzi. Mam dwa elementy div, jeden mniejszy drugi większy. Normalnie większy div nie mieści się w mniejszym i pojawiają się poziome i pionowe paski przewijania. Ja chce żeby zamiast pasków przewijania można było przesuwać większy div w mniejszym poprzez wciśnięcie i przytrzymanie lewego przycisku myszy i przesunięcie kursora. Jakieś wskazówki jak osiągnąć taki efekt?


(Piesek64) #2

A ten pierwszy jest większy od czego?

 

Proszę, oto rozwiązanie (długi adres, więc skróciłem): http://goo.gl/19aNPe


(rycerz2000) #3

Napisałem większy zamiast mniejszy. Mój błąd, już poprawiłem.


(hindus) #4

Czy to nie będzie coś w stylu lupy? Tak jak w http://www.jqueryscript.net/demo/Versatile-jQuery-Magnifying-Glass-Effect-Plugin-Tikslus-Zoom/ 


(rycerz2000) #5

Nie wiem, musiało by być samo powiększenie (bez większego elementu) które można przesuwać myszką.

 

Ten link zbytnio mi nie pomógł.

 

Znalazłem jQuery Draggable ale tam są tylko przykłady przesuwania mniejszego diva w większym a nie odwrotnie. Da się to jakoś zrobić z tym jQuery Draggable?


(Drobok) #6

Do tego przykładu z demo na dole dodaj overflow: hidden i wymiary dla obu divów i powinno być ok.


(rycerz2000) #7

No dobra mam taki kod:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
#draggable {
	width: 800px;
	height: 800px;
	cursor: pointer;
	background-color: green;
}
.container {
	border: 1px solid red;
	width: 400px;
	height: 400px;
	overflow: hidden;
}
  </style>
  <script>
$(document).ready(function() {
	$(function() {
		$( "#draggable" ).draggable({
			cursor: "pointer"
		});
	});
 });
</script>
</head>
<body>
<div class="container">
<div id="draggable" >
  Drag me around
</div>
</div> 
</body>
</html>

Działa dobrze tylko jeszcze mam jeden problem. Z powyższym kodem div można przeciągnąć np. tak:

a chciałbym żeby większego diva nie można było przeciągnąć dalej niż krawędzie mniejszego diva. W tym wypadku wyglądało by to tak:

Macie jakieś pomysły?


(artu4) #8

http://jsfiddle.net/tovic/Xcb8d/light/

http://draggabilly.desandro.com/

http://jqueryui.com/draggable/

 


(rycerz2000) #9

Może oszczędźmy mojej męki, czy za pomocą rozwiązania podanego pod którymś z tych linków można osiągnąć to o co mi chodzi?

Ma to być rozwiązanie mojego problemu przedstawionego we wcześniejszym poście? Bo ja tu widzę linki które mogły by być odpowiedzią na pierwszy post(a nie na mój aktualny problem) i w dodatku nie były by dość pomocne bo tego typu przykłady znajdywałem jeszcze przez napisaniem tematu. Nie znalazłem pod żadnym z tych linków rozwiązania mojego problemu, jeśli ktoś inny znalazł gdzieś rozwiązanie problemu lub wie jak go rozwiązać proszę o napisanie wprost a nie podanie jakichś mało pomocnych linków i w dodatku bez jakiegokolwiek wytłumaczenia o co chodzi.

Co do ostatniego linku to właśnie dzięki tej stronie doszedłem do rozwiązania z mojego wcześniejszego postu.


(Drobok) #10

Masz eventy w ostatnim linku, parsuj pozycję i wg niej zrób ograniczenia :stuck_out_tongue:


(rycerz2000) #11

Ja nawet nie do końca rozumiem Twoją wypowiedź a co dopiero żeby zrobić to o czym piszesz  :mrgreen: