Stworzenie ograniczonego diva z ruchomymi elementami wewnątrz

pytanie zadane 12 stycznia 2017 w JavaScript przez Osheo Początkujący (260 p.)

Witam, ostatnio w celu nauki stworzyłem sobie container do którego za pomocą kliknięcia mogę dodawać buttony i mają one funkcję drag and dropa. Chciałbym aby ten div container miał granice tzn. kiedy ruszam buttonem to jak spotka się on z lewą bądź górną krawędzią containera to zatrzyma sie i nie będzie go można przesunąć ponad obszar tego diva + jeśli przesuniemy go na dolną krawędź to ten div będzie się rozciągał w długości. Z góry dziękuję za pomoc i pozdrawiam :)

komentarz 12 stycznia 2017 przez Szymon Lisowiec Mądrala (7,150 p.)

Pierwsze rozwiązania jakie mi przyszły:
- Wykorzystać lokalizację myszy.
- Poszerzać container przy wydarzeniu "mouseout", a zwężać gdy np. szerokości się większa od Xpx i kursor myszki nie jest przy krawędzi containera.

komentarz 12 stycznia 2017 przez Osheo Początkujący (260 p.)

Ale to rozwiązanie będzie trochę uciążliwe, ponieważ rozmiary tych buttonów są przez użytkownika ustawiane. Można to jakoś zrobić związanego z buttonami a nie z pozycją myszki ? Czy może się mylę :)

komentarz 12 stycznia 2017 przez Szymon Lisowiec Mądrala (7,150 p.)

W atrybutach data można przechowywać rozmiary przycisku (more info). Mogło by Ci się może jeszcze to przydać CLICK, getBoundingClientRect zawiera informację gdzie element znajduje się względnie do okna przeglądarki (pokrywa się to wtedy z lokalizacją kursora, którego pozycja też jest względnie do okna).

Nic innego nie przychodzi mi do głowy. Możliwe, że jest jakiś framework wykrywający kolizje elementów na stronie czy coś. Znalezione na szybko; https://github.com/niklasramo/overlap.js/tree/master