Forum PHP.pl > [JS] Drag&Drop

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

tomek_byd

8.10.2009, 18:39:09

Znalazłem parę skryptów do przesuwania obiektów jednak z każdym w pewnym momencie ma problem. Mam 2 obrazki:

[HTML] pobierz, plaintext 
<img src="/obudowy/maska.png" id="img_maska" style="position: absolute; z-index: 2;"/>
<div style="position: absolute; width: 500px; height: 500px; overflow: hidden;">
	<img src="/tmp/a2e81ca9898d476e82187b197df51f1a.jpeg" id="img_zdjecie" style="z-index: 1; position: relative;" onmousedown="OnMouseDown(event);"/>
</div>
[HTML] pobierz, plaintext

Obrazek img_maska jest przezroczystym png który nakładają pewne elementy na img_zdjecie. Gdy złapię img_zdjecie poza przykrywającymi go obrazkiem img_maska to się przesuwa, jak w img_maska w miejscu przezroczystości to już nie.

kamil4u

8.10.2009, 19:03:12

A jakie jest pytanie? I jakbyś mógł to opisz to trochę dokładnie lub daj SC lub (najlepsza opcja) przygotuj stronę testową

Edit: prawdopodobnie musiałbyś lekko zmodyfikować skrypt D&D po kątem ... no właśnie nie pamiętam jak to się nazywało, ale coś z bubbling-iem prawdopodobnie http://www.quirksmode.org/js/events_order.html (pewny nie jestem)

tomek_byd

9.10.2009, 10:21:35

Co do skryptu pełniejszego to tu zamieściłem działający kod http://tomek-byd.pl/. Jest to najważniejszy kawałek dużo większego kodu. Maska to ten biały kwadrat 400x400px z przezroczystym środkiem. Elementem przesuwanym jest to zdjęcie przykryte przez maskę. Specjalnie zrobiłem je o 100px większe żeby można było złapać poza maską. Jak się właśnie poza nią złapie skrypt chodzi ładnie. Jak się złapie w miejscu maski niestety nie działa.
kamil4u: dzięki za link zaraz to przejrzę i może coś mi to pomoże.

kamil4u

9.10.2009, 14:40:32

No to można to zrobić dużo łatwiej

A więc w funkcji OnMouseDown podmieniasz:

Kod

var target=e.target!=null?e.target:e.srcElement;

Kod

var target=document.getElementById('img_zdjecie');

i html ma wyglądać coś w tym stylu:

Kod

Pozdrawiam

tomek_byd

9.10.2009, 21:25:15

No to to rozwiązanie zaczyna działać. Jednak jest pewien kłopot. Jeśli kliknę i zacznę ciągnąc nic się nie dzieje, pokazuje się kursor ze znakiem zakazu, dopiero jak puszcze i dalej przesuwa to już się przesuwa. Dodatkowo w Chrome zaznacza się na niebiesko obrazek maski w czasie przesuwania. Niestety JS nie jest moją mocną stroną, zwłaszcza zaawansowane opcje związane z zdarzeniami i nietypowymi własnościami obiektów.

kamil4u

10.10.2009, 10:37:39

Dodaj:

Kod

event.preventDefault();

w onmousedown w

Cytat

lub to samo tyle, że zamist event samo 'e' w w funkcji OnMouseDown zaraz po

Kod

if(e==null)e=window.event;

- lepiej ten 2 sposób

--nie sprawdzałem czy zadziała--

tomek_byd

12.10.2009, 16:58:00

Metoda ta pomogła we wszystkich przeglądarkach z wyjątkiem IE. Próbowałem zaleźć sam rozwiązanie i e.returnValue=false; nie spełnia swojej roli a e.stop(); oraz e.stopPropagation(); uznawane są za błąd w IE.

kamil4u

12.10.2009, 17:43:47

Niestety nie znam na tyle IE, a że korzystam z Linuksa nie mogę skorzystać z metody prób i błędów - jak będę miał możliwość to wyedytuję posta.

erix

12.10.2009, 18:08:33

http://www.webreference.com/js/column10/cancel.html

tomek_byd

13.10.2009, 08:35:32

Cytat(erix @ 12.10.2009, 19:08:33 )

http://www.webreference.com/js/column10/cancel.html

Niestety ta metoda też nic nie daje. IE nie wykazuje błędu ale efekt jest taki sam czyli po kliknięciu i przytrzymaniu następuje przez chwile przesunięcie a potem pokazuje się kursor zakazu i dopiero jak się puści klawisz obrazek się przesuwa. Żeby przerwać przesuwanie trzeba kliknąć jeszcze raz przycisk myszki a przecież tak to nie ma działać.

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.