Помогите пожалуйста! Два часа бьюсь не знаю в чем дело(мало опыта)!
Делал что-то типа слайдера. Внизу выложил код, можете скопировать к себе в блокнот и посмотреть как он работает, запустив в браузере. Надо нажать на выделенный div и не отпуская протащить.
Теперь вопросы:
Почему onmousedown обрабатывается только один раз?
Мне надо что бы выделенный div ездил туда-обратно каждый раз при перетаскивании, а он ездит только кода его перетаскиваешь первый раз.
Вот код:
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
}
#videos {
top: 20px;
left: 20px;
height: 25px;
width: 30px;
background: #EEE;
margin-left: 0px;
}
</style>
</head>
<body>
<div id="videos">
</div>
<script>
var videos = document.getElementById('videos');
videos.onmousedown = function (e) {
e = window.event;
var clickPosition = e.clientX;
var currentMarginValue = videos.style.marginLeft;
dragDiv(e);
function dragDiv(e) {
var mouseMovePosition = clickPosition - e.clientX;
videos.style.marginLeft = currentMarginValue - mouseMovePosition + 'px';
}
document.onmousemove = dragDiv;
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
}
};
</script>
</body>
</html>
Примечание:
Примечание: мне надо это сделать на чистом(Vanilla) js.
в консоли ничего не пишет, открывал, смотрел.
да. событие windows.event можно убрать, оно ничего не решает, проблема всё равно осталась и она явно не в том.
Примечание:
Вопрос снят. Разобрался. Может кому-то будет полезно.
Дело в том что когда страница загружается первый раз значение margin-left моего div-a равно ''(т.е ничего), и оно js-ом спокойно преобразуется в 0, когда я первый раз начинаю двигать div значение изменяется и становится равны например '20px' что является уже строкой.Вот тут и начинается веселье. В onmousemove, я пытаюсь сложить строку со строкой и присвоить это значение в marginLeft браузер просто игнорирует эту запись и не меняет прошлого значения.
Что бы все работало.Нужно изменить одну строчку вот так:
var currentMarginValue = +videos.style.marginLeft.replace('px','');
т.е убираю 'px', из полученного значения marginLeft, если он там есть и всё это хитро (js поймет) преобразую к числу с помощью оператора +.
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.