Как эмулировать эту функциональность javascript (подвижный div и сохраненные позиции)

Question

Я видел функцию на сайте, которой я хотел бы подражать. У меня средний уровень php, но я начинающий пользователь javascript. Особенностью является содержимое сайта, отображаемое в виде элементов div, которое можно перемещать по экрану и сохранять его положение с помощью файлов cookie. Этот сайт: [url] www.nowgamer.com [/ url] - это место, где я его видел (последние подкасты, видео, обзоры и т. Д. С фильтром)

Как мне добиться этого с помощью javscript? Я хочу знать, как связать javascript с файлом cookie, чтобы сохранить положение квадратных элементов div, а также параметры фильтра содержимого для каждого элемента div. Как мне этого добиться?

Это будет большая работа? Спасибо за любую помощь, я работаю над этим самостоятельно в свободное время, так что ваш вклад с советом - мой спасательный круг.

Answer 1

Как прокомментировал Зойдберг, это легко сделать с помощью JQuery, Yui или любой другой библиотеки javascript, которая обеспечивает функцию перетаскивания.Они почти просты в настройке, проверяя на демонстрации, которую они дают.Они также отображают определенные события, такие как beforeDrag, afterDrag, onDrop, etc., где вы можете запустить простую функцию js, проверить, что элементы отброшены, сохранить их в файлах cookie.Для настройки файлов cookie существует множество кода в Интернете.

Кроме того, вы можете проверить плавающее абсолютное / относительное позиционирование css, если ваши DOM-элементы будут перемещаться по странице.

GoodLuck.

Answer 2

Просто у него есть правильный ответ, но я бы хотел его немного расширить:

Основы перетаскиваемого div не слишком сложны.Вы присоединяете обработчик onclick, чтобы инициировать перетаскивание.Внутренне это достигается путем изменения CSS для div, так что это position: absolute.Затем вы начинаете отслеживать движения мыши (в основном onmousemove) и изменяете значения div'а top и left в соответствии с захваченными вами движениями.

Отбрасывание немного сложнее.Вы всегда можете просто отпустить мышь и оставить div там, где вы его в конечном итоге переместили, но это оставляет его абсолютно позиционированным и, следовательно, вне обычного потока документов.Но удаление его «внутри» какого-то другого элемента означает большую подготовительную работу.

Из-за того, как работают события mouseover / mouseout / mouseenter, они не будут работать, пока вы перетаскиваете элемент - у вас естьваш перетаскиваемый элемент div под мышью, поэтому на остальной части страницы не будет происходить никаких событий входа / выхода мыши.jquery / mootools и тому подобное обходят его, позволяя вам указывать зоны перетаскивания.Места / размеры этих зон предварительно рассчитаны и по мере перетаскивания.Затем, когда вы перетаскиваете, положение перетаскиваемого объекта сравнивается с этими предварительно рассчитанными местоположениями зоны падения для каждого события перемещения.Если вы «входите» в одну из этих зон, то библиотеки внутренне запускают события mouseenter / mouseleave / mouseover, чтобы имитировать фактическое событие mouseenter / left / over, произошедшее.

Если вы попадете внутрь зоны, divпривязывается как ребенок этой зоны.Если вы выбрасываете наружу, то он обычно «возвращается назад» к тому месту, где он был, когда вы инициировали перетаскивание.

Изменение размера несколько похоже, за исключением того, что вы настраиваете height и width вместо top и left.