[JS] Drag&Drop Opcje

[tomek_byd]

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]

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)

Ten post edytował kamil4u 8.10.2009, 19:07:20

[tomek_byd]

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]

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;

na

Kod

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

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

Kod

    <div style="text-align: center; width: 100%;">
        <div style="overflow: hidden; margin-left: auto; margin-right: auto; margin-top: 25px; width: 400px; height: 400px; text-align: left;">
            <img src="Kreator_pliki/maska.png" id="img_maska" style="position: absolute; z-index: 2;" onmousedown="OnMouseDown(event);">
            <div style="overflow: hidden; position: absolute; width: 500px; height: 500px;">
                <img src="Kreator_pliki/a2e81ca9898d476e82187b197df51f1a.jpeg" id="img_zdjecie" style="z-index: 1; position: relative; left: -380px; top: -189px;" class="drag">
            </div>
        </div>
    </div>

Pozdrawiam

[tomek_byd]

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]

Dodaj:

Kod

event.preventDefault();

w onmousedown w

<img src="Kreator_pliki/maska.png" id="img_maska" style="position: absolute; z-index: 2;" onmousedown="OnMouseDown(event);">

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]

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]

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]

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

[tomek_byd]

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ć.