Firefox拖动div就像是一个图像 [英] Firefox drags div like it was an image

问题描述

我正在使用这个HTML，CSS和Javascript代码（如果你想测试一个文档在一起的文档）：

I'm using this HTML,CSS and Javascript code (in one document together if you want to test it out):

<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中工作正常，但是当这个javascript是javascript时，firefox似乎完全是clusterf * ck用过的。第一个幻灯片可以，你拖动，它说滑动，你下降，它说不滑动。在第二个幻灯片（或mousedown，如果你愿意），firefox突然认为div是一个图像或链接，并想要拖动它。

Everything (surprisingly) works fine in IE, but firefox seems to totally clusterf*ck when this javascript is used. The first "slide" is okay, you drag, it says "sliding", you drop, it says "not sliding". On the second "slide" (or mousedown if you will), firefox suddenly thinks the div is an image or link and wants to drag it around.

拖动的屏幕截图：

显然，被定位在红色的div是被拖动的。

Obviously the blue div half-positioned in the red div is the one being dragged. Windows does not capture the cursor when you take a screenshot, but it's a stop sign.

有没有办法阻止这种默认行为？

Is there someway to prevent this default behaviour?

推荐答案

您需要从事件处理程序返回false，以防止默认操作（选择文本，拖动选择等）。基于Crispy发布的代码，这是我的解决方案：

You need to return false from the event handlers to prevent the default action (selecting text, dragging selection, etc). Based on the code posted by Crispy, Here is my solution:

$(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;
        }
    });
});

这篇关于Firefox拖动div就像是一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！