Mam dwa divy. Napisałem już prosty skrypt, który umożliwia przesuwanie obydwu w pionie i poziomie. Działa na zasadzie: najeżdżasz na div, wciskasz i trzymając przycisk myszy przeciągasz. Puszczając przycisk myszy, upuszczasz. Działa to dobrze problemu z tym akurat nie ma.
Pytanie jest takie: czy jest metoda/sposób, aby odczytać id div nr 2 (czy innego dowolnego elementu) w momencie, gdy 'trzymając' i przesuwając div nr 1 najeżdżam na 2 kursorem? Wszelkie metody, jakich próbowałem, dają mi odczyt diva nr 1 (logiczne, on jest na wierzchu...). Da się to jakoś ominąć?
W zamierzeniu, chcę stworzyć konfigurowalną listę z możliwością przeciągania i upuszczania elementów. Są takie skrypty, ale po pierwsze - uczę się i chcę to zrobić sam, a po drugie - są to wielkie, kilkunastokilobajtowe kobyły w czystym JS.
Pełna wersja: [JS][jQuery]
Nareszcie ktoś się uczy i nie chce gotowego skryptu 
- powodzenia!
Ale dostaniesz gotowy skrypt, bo tak łatwiej wyjaśnić:
Pytaj o co chcesz, bo kod na pierwszy rzut oka może okazać się trudny.
- powodzenia!Ale dostaniesz gotowy skrypt, bo tak łatwiej wyjaśnić:
Kod
<div id="test"></div>
<div id="kontener">kontener1</div>
<style>
#test{ background-color: red; cursor: pointer; width: 100px; height: 100px; position: absolute; }
#kontener{ background-color: green; width: 200px; height: 200px; position: absolute; top: 100px; left: 300px; }
</style>
<script>
function dragDrop( E,K,e){
var x,y,minX;
if(document.last)
document.last.style.zIndex = 1;
(document.last = E).style.zIndex = 10;
e = e || event;
e.stopPropagation();
e.preventDefault();
x = ~~(e.layerX || e.offsetX);
y = ~~(e.layerY || e.offsetY);
minX = -( 0.8 * parseInt(E.style.width) );
document.onmouseup = function(e){
this.onmousemove = null;
}
document.onmousemove = function(e){
e = e || event;
e.preventDefault();
E.style.left = (e.clientX - x) +'px';
E.style.top = (e.clientY - y) +'px';
if( (e.clientX - x) > K.offsetLeft &&
(e.clientX - x) < (K.offsetLeft + K.offsetWidth) &&
(e.clientY - y) > K.offsetTop &&
(e.clientY - y) < (K.offsetTop + K.offsetHeight) ){
E.innerHTML = 'tak';
} else {
E.innerHTML = 'nie';
}
return false;
}
}
document.getElementById('test').onmousedown = function(e){ dragDrop( this,
document.getElementById('kontener'), e ); };
</script>
<div id="kontener">kontener1</div>
<style>
#test{ background-color: red; cursor: pointer; width: 100px; height: 100px; position: absolute; }
#kontener{ background-color: green; width: 200px; height: 200px; position: absolute; top: 100px; left: 300px; }
</style>
<script>
function dragDrop( E,K,e){
var x,y,minX;
if(document.last)
document.last.style.zIndex = 1;
(document.last = E).style.zIndex = 10;
e = e || event;
e.stopPropagation();
e.preventDefault();
x = ~~(e.layerX || e.offsetX);
y = ~~(e.layerY || e.offsetY);
minX = -( 0.8 * parseInt(E.style.width) );
document.onmouseup = function(e){
this.onmousemove = null;
}
document.onmousemove = function(e){
e = e || event;
e.preventDefault();
E.style.left = (e.clientX - x) +'px';
E.style.top = (e.clientY - y) +'px';
if( (e.clientX - x) > K.offsetLeft &&
(e.clientX - x) < (K.offsetLeft + K.offsetWidth) &&
(e.clientY - y) > K.offsetTop &&
(e.clientY - y) < (K.offsetTop + K.offsetHeight) ){
E.innerHTML = 'tak';
} else {
E.innerHTML = 'nie';
}
return false;
}
}
document.getElementById('test').onmousedown = function(e){ dragDrop( this,
document.getElementById('kontener'), e ); };
</script>
Pytaj o co chcesz, bo kod na pierwszy rzut oka może okazać się trudny.
Bardzo dziękuję. Widzę tu przynajmniej dwie funkcje, o których istnieniu nie miałem do tej pory pojęcia, a które, po lekturze manuala, bardzo mi się w przyszłości przydadzą. Po uważniejszej lekturze, wyciągnę pewnie jeszcze więcej.
Takie sytuacje uświadamiają człowiekowi, jak mało jeszcze wie i potrafi.
Takie sytuacje uświadamiają człowiekowi, jak mało jeszcze wie i potrafi.
Odnośnie samego skryptu drag&drop to tu chyba najlepsze wyjaśnienie: http://forum.webhelp.pl/javascript/warstwa...nie-t51511.html - pamiętam jak kiedyś sam dokładnie to analizowałem
Cytat(stud3nt @ 31.08.2012, 17:15:48 ) 
Pytanie jest takie: czy jest metoda/sposób, aby odczytać id div nr 2 (czy innego dowolnego elementu) w momencie, gdy 'trzymając' i przesuwając div nr 1 najeżdżam na 2 kursorem? Wszelkie metody, jakich próbowałem, dają mi odczyt diva nr 1 (logiczne, on jest na wierzchu...). Da się to jakoś ominąć?
jest na to kilka sposobów...
jeśli kontenerów do upuszczania miałbyś wiele i dodatkowo element upuszczany koniecznie chcesz trzymać pod myszką, to musisz sprawdzać pozycję myszki w stosunku do tamtych kontenerów...
inny prosty sposób to lekkie przesunięcie upuszczanego elementu w stosunku do myszki tak by nie przysłaniał elementów pod myszką, wtedy bez problemu otrzymasz dostęp do elementów znajdujących się niżej... oczywiście jeśli masz wiele kontenerów optymalnie by było nie podpinać zdarzenia pod każdy kontener do upuszczania a pod jakiś nadrzędny element i skorzystać np. z .delegate w jQuery (odpowiednik .live ale lepszy - nie chce mi się rozpisywać)... i tu dobrze by było, gdybyś rozumiał propagację zdarzeń itd., dobrze by było, gdybyś się zapoznał np. z tym blogiem by rozumieć jak to jest rozwiązane w czystym JS (a potem byś korzystał np. z jQuery chyba, że wolałbyś pisać swoje rozwiązania) http://www.quirksmode.org/js/contents.html#events
poza tym przeczytaj o drag and drop w HTML5:
Native HTML5 Drag and Drop
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.