Ошибка действия перетаскивания в IE при запуске события мыши в скрипте - PullRequest
Новая
       5

Ошибка действия перетаскивания в IE при запуске события мыши в скрипте

2 голосов
/ 01 сентября 2011

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<style>
    #draggable1stColumn { width: 70px; height: 100%; float:left;}
    #draggable2ndColumn { width: 144px; height: 100%; float:left;}
    #draggable3rdColumn { width: 42px; height: 100%; float:left;}
    .spacerDiv { width: 8px; height: 100%; float:left; background-color:#FFFFFF;}   
    .containerDiv { position:relative; width: 320px; height: 214px; background-color:#00FFCC;}
    .innerDiv { top: 10px; left: 24px; position:absolute; width: 272px; height: 195px; background-color:#FF9933; overflow:hidden;} 
    .rowDiv { width: 100%; height: 39px; background-color:#CCCCCC;}
    .rowDivAlt { width: 100%; height: 39px; background-color:#999999;}
</style>
<script type="text/javascript">
$(function() {
    $( ".ui-widget-content" ).draggable({ axis: "y" });
});
</script>
</head>

<body>
    <div class="containerDiv">
        <div class="innerDiv">
            <div id="draggable1stColumn" class="ui-widget-content">
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
            </div>
            <div class="spacerDiv"></div>
            <div id="draggable2ndColumn" class="ui-widget-content">
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
            </div>
            <div class="spacerDiv"></div>
            <div id="draggable3rdColumn" class="ui-widget-content">
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
            </div>
        </div>
    </div><!-- End containerDiv -->
<script type="text/javascript">
$(".ui-widget-content").bind("mouseleave",function(){
    $(".ui-widget-content").mouseup();
});
</script>
</body>
</html>

Сценарий, кажется, работает нормально во всех других браузерах, кроме IE (я использую IE 8).В IE скрипт работает нормально, пока я не запускаю мышь изнутри скрипта (то есть перетаскивание остановится и снова начнется нормально, если я подведу курсор в соответствующие размеры div).Но как только я вывожу мышь (продолжая перетаскивать div) из div, действие перетаскивания становится непредсказуемым в IE.Он работает время от времени, а в другое - нет.Вам придется пару раз щелкнуть мышью по соответствующему элементу div, чтобы проверить это.

Есть идеи, что происходит ??Пожалуйста помоги.

1 Ответ

1 голос
/ 02 сентября 2011

решена. Ответ становится очевидным, когда вы добавляете некоторый текст к элементам div, которые перетаскиваются. Как только мышь перетаскивается наружу (чтобы остановить перетаскивание путем запуска мыши в сценарии), div становится стационарным. Теперь, если мы рассмотрим еще раз, вот что произошло:

  1. мышь вниз по div
  2. движения мыши или перетаскивание мыши
  3. div с мышью
  4. мышь выходит за пределы
  5. сработала мышь
  6. div прекращает перетаскивание или стационарный div (и текст)
  7. мышь все еще движется (это очень короткий момент между тем, когда скрипт запускает мышь вверх и когда мы фактически отпускаем мышь вверх)
  8. мышь вверх

Видимо, шаги 1, 2, 6, 7, 8 - это то, что мы обычно делаем, чтобы выбрать текст или элемент пользовательского интерфейса в браузере. Таким образом, теперь IE интерпретирует это комбинированное действие как действие выбора и, следовательно, заканчивает тем, что выбирает все тексты в div, а иногда и в других div (а когда текста нет, невидимые div сами оказываются в выбранном состоянии). Поэтому, когда div перетаскивается снова, этот выбор заставляет его прекратить действие перетаскивания. Все, что нам нужно сделать, это щелкнуть где-нибудь на странице, чтобы отменить выбор, а затем перетаскивание снова работает нормально. Другие браузеры как-то запоминают промежуточные шаги и отличают их от действия выбора, и поэтому не имеют никаких проблем.

...