Сегодня мы решим некоторые проблемы в прототипе последнего перетаскивания. Посмотрим, в чем проблемы?
Приложил код JavaScript из предыдущего выпуска, чтобы облегчить всем просмотреть проблему.
<script type = "text/javascript"> window.onload = function () {var Odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; Odiv.onmousedown = function (ev) {var oevent = ev || событие; disx = oevent.clientx - Odiv.offsetleft; disy = oevent.clienty - Odiv.offsettop; Odiv.onmouseMove = function (ev) {var oevent = ev || событие; ODIV.STYLE.LEFT = oevent.Clientx - disx+'px'; Odiv.Style.top = oevent.clienty - Disy+'px'; }; Odiv.onmouseup = function () {Odiv.onmouseMove = null; Odiv.onmouseup = null; }; }; }; </script>1. Если моя мышь сейчас движется быстрее, вы обнаружите, что мышь выходит из этого Div, и Div не будет следовать за мышью в это время.
Тогда почему эта проблема возникает?
Причина на самом деле очень проста. Мы добавляем событие MouseMove в Div, поэтому, как только мышь отклонится от Div, MouseMove больше не будет запускаться в это время.
Решение: событие загружается в документ, потому что ваша мышь все еще находится на странице, несмотря ни на что, MouseMove будет запускаться, несмотря ни на что, так что это будет быстро.
Затем мы изменяем код соответственно.
<script type = "text/javascript"> window.onload = function () {var Odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; Odiv.onmousedown = function (ev) {var oevent = ev || событие; disx = oevent.clientx - Odiv.offsetleft; disy = oevent.clienty - Odiv.offsettop; // В документе загрузки события.onmouseMove = function (ev) {var oevent = ev || событие; ODIV.STYLE.LEFT = oevent.Clientx - disx+'px'; Odiv.Style.top = oevent.clienty - Disy+'px'; }; Odiv.onmouseup = function () {document.onmouseMove = null; Odiv.onmouseup = null; }; }; }; </script>Тогда эта проблема может быть решена.
2. Давайте посмотрим, какие проблемы все еще есть. Хотя проблема быстрого перетаскивания была решена, когда я переместил мышь на эту позицию
Теперь вы можете ясно видеть, что мышь нет в Div. Если вы поднимаете мышь в это время, вы увидите, что она будет двигаться после того, как вы вернетесь. Это еще одна ошибка!
На самом деле, этот вопрос такой же, как и выше. Так что это очень просто решить, давайте добавим MouseUp в документ, давайте попробуем это
document.onmouseup = function () {document.onmouseMove = null; document.onmouseup = null; };Таким образом, если вы переходите в должность, которую вы только сейчас, не будет предыдущей ошибки, и не будет никаких проблем с быстрым движением. Все нормально.
3. Давайте посмотрим на проблемы совместимости браузера
На самом деле, есть такая проблема в нижней версии браузера Firefox
Полем Как это произошло? Когда вы перетаскиваете в первый раз, это правильно. Когда вы перетащите его один раз, нажмите, держите его и переместите его, вы обнаружите, что за ним будет тень. Что с этим происходит?
На самом деле, Firefox, который мы перетаскиваем сейчас, является багги. Так что, если мы добавим некоторый контент в div
Вы обнаружите, что сейчас нет проблем.
Таким образом, ошибка Firefox появляется только в пустом Div.
Решение:
На самом деле, это очень просто. Нам просто нужно заблокировать событие по умолчанию браузера и вернуть False; в Онмуседауне. Зачем добавлять его в OnmouseDown?
Вы можете подумать о том, какое событие начинает перетаскивать? Это начинается с Onmousedown. Когда мышь нажимается, начинается перетаскивание. Так что вам нужно загрузить Onmousedown.
На самом деле, он только что добавил предложение, возвращающееся false; Заблокировал ошибку Firefox.
Таким образом, независимо от того, как вы откладываете, проблем не будет.
Прилагаемый код:
<script type = "text/javascript"> window.onload = function () {var Odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; Odiv.onmousedown = function (ev) {var oevent = ev || событие; disx = oevent.clientx - Odiv.offsetleft; disy = oevent.clienty - Odiv.offsettop; // В документе загрузки события.onmouseMove = function (ev) {var oevent = ev || событие; ODIV.STYLE.LEFT = oevent.Clientx - disx+'px'; Odiv.Style.top = oevent.clienty - Disy+'px'; }; document.onmouseup = function () {document.onmouseMove = null; document.onmouseup = null; }; вернуть ложь; }; }; </script>Программа теперь завершена, но есть еще некоторые проблемы с пользовательским опытом.
Например, если пользователь может вытащить этот Div из браузера, как он может его решить?
Тогда мы добавляем суждение. Это очень просто, если вы выходите слева
, это прямо равен 0, и он не может выйти слева. Тогда то же самое верно выше.
Итак, как мы можем помешать себе выйти из -под правых? ? Просто нарисуйте картинку и дайте понять. Фактически, мы можем рассчитать его, вычитая визуальную ширину страницы из Div.
Тогда это так называемое максимальное значение. Просто судите, если перемещение расстояния превышает это максимальное значение, оно равно этому максимальному значению. Тогда следующее одинаково.
Подключить полный код:
<script type = "text/javaScript"> // перетаскивать пустое div. Низкая версия Firefox имеет window window.onload = function () {var Odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; Odiv.onmousedown = function (ev) {var oevent = ev || событие; disx = oevent.clientx - Odiv.offsetleft; disy = oevent.clienty - Odiv.offsettop; document.onmousemove = function (ev) {var oevent = ev || событие; // хранить текущее местоположение div var odivleft = oevent.clientx - disx; varyivtop = oevent.clienty - disy; // перетаскивать слева if (Odivleft <0) {Odivleft = 0; } else if (odivleft> document.documentelement.clientwidth - Odiv.offsetWidth) {OdiVleft = document.documentelement.clientWidth - Odiv.OffSetWidth; } if (odivtop <0) {Odivtop = 0; } else if (odivtop> document.documentelement.clientheight - Odiv.offsetheight) {Odivtop = document.documentelement.clientHeight - Odiv.OffSetheight; } odiv.style.left = odivleft + 'px'; ODIV.Style.top = ODIVTOP + 'px'; }; document.onmouseup = function () {document.onmouseMove = null; document.onmouseup = null; }; вернуть ложь; // заблокировать событие по умолчанию и разрешить ошибку Firefox}; }; </script>Тогда сопротивление сейчас более завершено. O (∩_∩) o