Firefox перетаскивает div, как будто это было изображение

Question

Я использую этот код HTML, CSS и Javascript (в одном документе, если вы хотите проверить его):

<style type="text/css">
#slider_container {
    width: 200px;
    height: 30px;
    background-color: red;
    display:block;
}

#slider {
    width: 20px;
    height: 30px;
    background-color: blue;
    display:block;
    position:absolute;
    left:0;
}
</style>
<script type="text/javascript" src="../../js/libs/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

   $("#slider").mousedown(function() {
       $(document).mousemove(function(evnt) {
       $("#test").html("sliding");
   }).mouseup(function() {
       $("#test").html("not sliding");
       $(document).unbind("mousemove mouseup");
   });});

});
</script>

<div id="test">a</div>
<div id="slider_container">
  <div id="slider"></div>
</div>

Все (на удивление) прекрасно работает в IE, но Firefox, кажется, полностью кластеризован, когда используется этот javascript. Первый «слайд» в порядке, вы перетаскиваете, он говорит «скользящий», вы опускаете, он говорит «не скользящий». На втором «слайде» (или mousedown, если хотите) Firefox внезапно думает, что div - это изображение или ссылка, и хочет перетащить его.

Скриншот перетаскивания:

Очевидно, что синий div, наполовину расположенный в красном div, - это та, которую перетаскивают. Windows не захватывает курсор, когда вы делаете скриншот, но это знак остановки.

Есть ли способ предотвратить такое поведение по умолчанию?

Answer 1

Вам необходимо вернуть false из обработчиков событий, чтобы предотвратить действие по умолчанию (выделение текста, перетаскивание и т. Д.). Основываясь на коде, опубликованном Crispy, вот мое решение:

$(function() {
    var sliderMouseDown = false;

    $("#slider").mousedown(function() {
        sliderMouseDown = true;
        return false;
    });
    $(document).mousemove(function(evnt) {
        if (sliderMouseDown) {
            $("#test").html("sliding");
            return false;
        }
    });
    $(document).mouseup(function() {
        if (sliderMouseDown){
            $("#test").html("not sliding");
            sliderMouseDown = false;
            return false;
        }
    });
});

Answer 2

Изящная ошибка, после того, как возиться с ней, похоже, что Firefox запоминает событие mousedown на слайдере и обрабатывает его так, как если бы пользователь начал выделять какой-то текст (отсюда и «знак остановки», который вы видели). Затем Firefox обрабатывает следующее событие mousedown, как будто пользователь куда-то перетаскивает текст. Там может быть более подходящее решение, но просто добавив $("#slider").focus() после этого Firefox «сбросит» курсор, чтобы он не думал, что пользователь перетаскивает какой-то текст.

Я также хотел бы прокомментировать, что вы постоянно связываете и связываете события (что, кажется, не подходит для ie7, выполняющего многократное перетаскивание). Я хотел бы предложить что-то вроде следующего, которое связывает делегатов один раз.

$(function() {
    var sliderMouseDown = false;

    $("#slider").mousedown(function() {
        sliderMouseDown = true;
    });
    $(document).mousemove(function(evnt) {
        if (sliderMouseDown) {
            $("#test").html("sliding");
        }
    });
    $(document).mouseup(function() {
        if (sliderMouseDown)
        {
            $("#test").html("not sliding");
            $("#slider").focus(); //<-- fix the FF issue to reset cursor
            sliderMouseDown = false;
        }
    });

});