Давайте посмотрим, какие проблемы возникнут, когда предыдущее перетаскивание, когда что -то вокруг этого? В современных браузерах не будет проблем. Давайте проверим это в IE7, и проблема выйдет. Как показано
Мы можем ясно видеть, что текст был выбран. Тогда этот пользовательский опыт очень плохой, и его не удобно использовать. Кстати, мы добавили возвращающийся ложь раньше; помог нам решить много проблем. Если мы удалим это, та же проблема возникнет в хроме. Так что это возвращает ложь; может решить проблемы браузеров Chrome FF IE9+.
На самом деле, в нашей разработке на странице есть много элементов, и невозможно иметь только один дивинг. Другие места не будут выбираются, когда вы перетаскиваете, такие как карта Baidu, вы можете играть с ней.
Итак, как мы делаем такую перетаскивание? Может ли это решить проблему IE7?
Решение:
Мы можем использовать небольшой трюк, чтобы решить его. Этот трюк может быть поддержан только в IE6-8, и может фактически решить нашу проблему, потому что другие браузеры используют return false; Посмотрим, каковы хитрости
Это захват событий! ! Прикрепить код к краткому описанию
<title> </title> <script type = "text/javascript"> window.onload = function () {var octn = document.getElementById ("btn"); optn.onclick = function () {alert (1); }; // События во всех местах на веб -странице сосредоточены на кнопке, т.е. // где бы вы ни нажимали, вы всплываете a} </script> </head> <body> <input type = "Кнопка" id = "btn" value = "Кнопка"/> </body>Фактически, события на всех местах на странице сосредоточены в точке, и появляется при щелчке на любую позицию страницы, которая является функцией setCapture ().
Соберите все события на одну кнопку, чтобы справиться! ! Это совместимо только с IE! !
Таким образом, позвольте мне посмотреть, как изменить предыдущий код. Полем Полем Полем
Во -первых, мы изменем все документы обратно на Div. Вы помните, что мы говорили раньше этого, потому что мышь тянутся быстрее, легко вытащить DIV, поэтому мы добавляем все события в документ.
И теперь нет необходимости делать это, добавьте SetCapture () в наш предыдущий Div, чтобы увидеть эффект.
<body> Текст в IE 7 будет выбран. <br /> Если вы не добавите возвращаемый false chrome ff, будет такая проблема Asdsadad <br /> <div id = "div1"> asdsadad asdsadad asdsadad < /div> asddadasdsdsadadad < /body>
<style type = "text/css"> #div1 {ширина: 200px; Высота: 200px; Фон: красный; позиция: абсолютно; } </style> <script type = "text/javaScript"> // перетаскивать пустое div. Низкая версия Firefox имеет windows 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 || событие; varyivleft = oevent.clientx - disx; varyivtop = oevent.clienty - disy; ODIV.STYLE.LEFT = ODIVLEFT + 'PX'; ODIV.Style.top = ODIVTOP + 'px'; }; Odiv.onmouseup = function () {Odiv.onmouseMove = null; Odiv.onmouseup = null; }; Odiv.SetCapture (); вернуть ложь; // заблокировать событие по умолчанию и разрешить ошибку Firefox}; }; </script>В настоящее время у нас на самом деле нет проблем с вытаскиванием Div, когда мы быстро его перетаскиваем. Фактически, после добавления SetCapture () все события на всей веб -странице будут собраны на этом Div.
На самом деле этот текст не будет выбран сейчас. Почему? Поскольку все события в тексте и картинки теперь находятся в DIV, они больше не могут получить события! Так что, естественно, они не будут выбраны.
Конечно, сейчас есть еще одна проблема? ? ? ? Вы обнаружите, что когда вы попытаетесь выбрать эти слова, вас не будут выбраны.
Что я должен делать? Все события сосредоточены на Div. Полем Полем !!!!!!
Итак, на самом деле, этот SetCapture () похож на замок. Теперь он заблокирован, и события все на Div. Теперь это нормально, чтобы разблокировать это. Соответствующим является RELEASECAPTURE ();
releaseCapture (); это выпустить захват. На самом деле, просто добавьте его, когда мышь поднимается.
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 || событие; varyivleft = oevent.clientx - disx; varyivtop = oevent.clienty - disy; ODIV.STYLE.LEFT = ODIVLEFT + 'PX'; ODIV.Style.top = ODIVTOP + 'px'; }; Odiv.onmouseup = function () {Odiv.onmouseMove = null; Odiv.onmouseup = null; ODIV.RELEASECAPTURE (); }; Odiv.SetCapture (); вернуть ложь; // заблокировать событие по умолчанию и разрешить ошибку Firefox}; };Теперь мы можем решить проблему выбора текста. Наконец, мы садимся и совместимы. На самом деле, этот SetCapture () несовместима, и неправильно поместить его в другие браузеры.
Это очень просто. Нам просто нужно объединить коды из этого и последнего. Просто сделайте совместимый с судом. Наконец, организованный код прикреплен
<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; if (Odiv.setCapture) {Odiv.onmouseMove = mouseMove; Odiv.onmouseup = mouseUp; Odiv.SetCapture (); // т.е. 7 Следующий текст не будет выбран, на самом деле это текст или изображение, которое нельзя получить.} Else {document.onmouseMove = mouseMove; document.onmouseup = mouseup; } function mouseMove (ev) {var oevent = ev || событие; varyivleft = oevent.clientx - disx; varyivtop = oevent.clienty - disy; ODIV.STYLE.LEFT = ODIVLEFT + 'PX'; ODIV.Style.top = ODIVTOP + 'px'; } function mouseUp (ev) {this.onmouseMove = null; this.onmouseup = null; if (Odiv.ReleaseCapture) {Odiv.ReleaseCapture (); // Выпустить захват}} вернуть false; // заблокировать событие по умолчанию и разрешить ошибку Firefox}; }; </script>Хорошо, все сделано O (∩_∩) o ха -ха ~