Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > событие onmouseup разное поведение в IE и Opera


Автор: Leonid1611 12.6.2008, 20:43
Событие onmouseup определено в атрибутах слоя (div). Работает так как хотелось бы в Opera, а  в IE и FF событие происходит только после нового щелчка. События используется для реализации перетаскивания. Т.е. в Opera нажимаем кнопку мыши перетаскиваем отпускаем перетаскивание оканчивается, а IE и FF элемент продолжает "тащиться" за мышью, пока снова не сделаешь click.  В чем может быть причина?

Автор: SelenIT 12.6.2008, 21:23
Leonid1611, а можно минимальный проблемный пример кода? Описанная схема событий, имхо, является классической для реализации drag'n'drop-а на JS, но все виденные мной примеры (в т.ч. с этого форума) как-то работали без такой проблемы. Есть подозрение, что корень зла в другом месте.

В этом div-е, случайно нет картинок или ссылок?

Автор: Ghirik 12.6.2008, 21:33
Цитата

а IE и FF элемент продолжает "тащиться" за мышью, пока снова не сделаешь click.


Сформируйте страничку, я такое наблюдал и от этого избавился...

Автор: Leonid1611 13.6.2008, 01:48
Цитата

Сформируйте страничку

Простите, не понял.

Цитата

В этом div-е, случайно нет картинок или ссылок?

Именно картинки div и содержит. 


Код

function startDrag(evnt)
{
    evnt = evnt || window.event; 
    mouseOffset = mousePosition(evnt);
    dragging = true;    
}

function stopDrag(evnt)
{
    dragging = false;
    repaint();
}

 function mouseMove(evnt)
 {
    if (!dragging) return;
    else {
        evnt = evnt || window.event;
        var mousePos = mousePosition(evnt);
        var element;
        for (var i = 0; i<draggableContainer.childNodes.length; i++) // обходим все дочерние узлы
            { 
            element = draggableContainer.childNodes[i];
            if (element.nodeType == 1) { // проверяем является ли элементом
            // если является меняем координаты
                element.style.top = (parseInt(element.style.top) + mousePos.y - mouseOffset.y )+"px";
                element.style.left = (parseInt(element.style.left) + mousePos.x - mouseOffset.x)+"px";              
               }
            }
            CENTER_X -= mousePos.x - mouseOffset.x;
            CENTER_Y -= mousePos.y - mouseOffset.y;
            mouseOffset=mousePos; 
        }    
 }

Автор: Ghirik 13.6.2008, 10:02
Цитата

Простите, не понял


Покажите проблему. Выложите код от <html> до </html>. Вам же будет удобнее, мы эту сраничку подредактируем, и обратно выложим.

Вообще, касаемо Dragging методов, мне понравилось http://www.quirksmode.org/. Вполне возможно, что качнув архив из указанной мной ссылки, ваши проблемы исчезнут сами сабой.

Автор: Leonid1611 13.6.2008, 12:29
Посмотреть можно здесь

http://vnagp.ru/WebPortal/NovgorodRegion/

Код

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Карта Новгородской области</title>
    <%--<link href="..\agp.css" type="text/css" rel="STYLESHEET" media="all"/>--%>
    <link href="map.css" type="text/css" rel="STYLESHEET" media="all"/>
    

</head>
<body onload = "onLoad()">    
    <form id="form1" runat="server" visible="true">
    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePageMethods="true" runat="server">
    <scripts>
        <asp:ScriptReference Path = "MapScripts_new.js"></asp:ScriptReference>        
    </Scripts>
    <Services>
        <asp:ServiceReference Path = "~/MapServices.asmx"></asp:ServiceReference>
    </Services>
    </ajaxToolkit:ToolkitScriptManager>
    
    <div id="mainPanel" class="mainPanel"> 
        <div id="map" class="mapDiv" onmousedown="startDrag(event)" onmousemove="mouseMove(event)" onmouseup="stopDrag(event)" ondblclick="clickZoom(event)" <%--onclick="getCoordinates(event)"--%>></div>
        <div id="zoomControl" class="zoomControl">
            <%--OnTextChanged="javascript:sliderZoom(Slider1_BoundControl.Text)"--%>
            <asp:TextBox ID="Slider1_BoundControl" Enabled="false" AutoPostBack="true" CssClass="sliderBound" runat="server"></asp:TextBox>
            <asp:TextBox ID="Slider1"  CssClass="sliderDiv" runat="server"></asp:TextBox>                     
            <div id="scale" class="scaleDiv">км</div>            
        </div>
        <div id="layers" class="layers"></div>
        <asp:UpdatePanel ID="layersDiv" runat="server">
            </asp:UpdatePanel>        
        <div id="Tools" class="toolsDiv">
            <asp:Panel ID="LayersChoiceHeaderPanel" runat="server" style="cursor: pointer;">
                <div>
                    <asp:ImageButton ID="ToggleImage"   runat="server" ImageUrl="images/collapse.jpg" AlternateText="collapse" Enabled="false" />
                    Выбор отображаемого слоя
                </div>
            </asp:Panel>
            <asp:Panel id="LayersChoicePanel" runat="server" style="overflow:hidden;">
                <%= GetLayersPanelText()%>
                <input type="button" id="LayerButton" value="Показать" name="LayerButton" onclick="getLayers(); return false;" />
                <input type="button" id="GetMapButton" value="Загрузить фрагмент карты" name="GetMapButton" onclick="downloadMap3();" />
            </asp:Panel>
            <asp:Button ID="GetMapButtonTest" runat="server" Text="Загрузить файл" OnClick="GetMapButtonTest_Click" />            
        </div>        
                     
    </div>   
         
        <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"
            BehaviorID="Slider1"
            TargetControlID="Slider1"
            BoundControlID="Slider1_BoundControl"
            Orientation="Vertical"
            EnableHandleAnimation="true"
            Minimum="0" Maximum="4" Steps="5" Decimals="0"            
            RaiseChangeOnlyOnMouseUp="true"                       
            TooltipText="2"/>
            
        <ajaxToolkit:CollapsiblePanelExtender ID="cpeDesc" runat="Server"
        TargetControlID="LayersChoicePanel"
        ExpandControlID="LayersChoiceHeaderPanel"
        CollapseControlID="LayersChoiceHeaderPanel"                
        ImageControlID="ToggleImage"         
        ExpandedImage="images/expand.jpg"
        CollapsedImage="images/collapse.jpg" /> 
    </form>
</body>
</html>

Автор: Leonid1611 14.6.2008, 14:45
 http://forum.vingrad.ru/topic-122195.html если кому то еще понадобиться.
Спасибо SelenIT.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)