Witam,
chciałbym zrobić przesuwane elementy na stronie które zakotwicza się w odpowiednich miejscach tak jak na pulpicie androida. Wiem jak zrobić aby elementy mogły być przesuwane ale mam problem z ich kolizjami oraz zakotwiczaniem w odpowiednich miejscach. Szablon strony będzie miał naniesioną siatkę z div'ów która będzie wyznaczała pola zakotwiczenia ów elementów. Prosiłbym o pomoc w tej sprawie, jakieś sugestie naprowadzenie jak mógłbym to zrobić, nie proszę o gotowy skrypt, tylko o pomoc. Od razu zaznaczę że nie jestem super dobry z js dopiero zaczynam.
Z góry dziękuję.
0
1
drag and drop js w Google to dobry początek. Tworzysz sobie siatkę kontenerów, każdy tego typu skrypt ma opcję wykrywania konteneru do którego coś wrzucasz, wycentrowaniem po wrzuceniu zajmie się css, a Twój jedyny problem to co zrobić, gdy wrzucisz ikonkę do kontenera, który już jakąś ikonkę ma (wtedy zapewne będziesz chciał poprzesuwać wszystkie o jeden kontener dalej)
0
Wielkie dzięki właśnie o coś takiego mi chodzi ale nie muszą się przesuwać wystarczy że wróci na starą pozycję. Ale to jeszcze coś pomyślę nad tym.
0
Jeszcze mam jeden problem bo ów elementy będą miały różne wielkości np na 2 kontenery na 4 kontenery itp. Czy da się to jakoś kontrolować?
1
Wszystko się da. Polecam jednak przyjąć strategię, która polega na budowie działającego szkieletu, a później obudowac go jakimiś wodotryskami. Zwłaszcza, że jesteś osobą początkującą. Myślę, że jak zaczniesz to tworzyć to sam wpadniesz na rozwiązanie, bo przy okazji tworzenia podstawowej siatki poznasz potrzebne techniki.
0
Mam nadzieję. Java, Html, CSS nawet znam już kilka lat bawię się w programowanie ale z js dopiero zaczynam zabawę bo sobie coś wymyśliłem i muszę to zrobić.
0
Aktualnie doszedłem do czegoś takiego.
<!DOCTYPE HTML> <html> <head> <style> #area {width:350px;height:70px;border:1px solid black;} .test{width:350px;height:140px;border:1px solid;} </style> <script> function allowDrop(ev) { ev.preventDefault(); }function drag(ev) {
ev.dataTransfer.setData("data", ev.target.id);
}function drop(ev) {
</head> <body>
if(ev.currentTarget.innerHTML == "")
{
ev.preventDefault();
var data = ev.dataTransfer.getData("data");
ev.target.appendChild(document.getElementById(data));
}
}
</script>
</body> </html>
Niestety nadal mam problem z kolizjami to znaczy gdy 1 z elementów nachodzi na 2 kontenery to i tak do 2 mogę dodać zawartość :( Jak mógłbym to zrobić tak aby skrypt wiedział że oba kontenery są zajęte nie tylko ten do którego dodałem lecz także ten na który nachodzi element. Myślałem nad zmiennymi ale nie wiem jak to będzie działało na większej liczbie pól oraz na dynamicznej ilości pól. Jeszcze jedno pytanie w jaki sposób mógłbym pobrać pozycje tych elementów czyli w którym div'ie leżą tak abym za pomocą np metody Post mógł je przechwycić do Javy? Z góry dziękuję za propozycje.