DIV层拖动效果时，其余的内容会反色，该如何解决？

如下代码
在IE8下
如果随意拖动DIV层，其他的文字经常会变成选中状态(相当于在网页上按住鼠标左键，然后随意拖动鼠标)
有什么办法让它不出现反色吗？？
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="JavaScript" type="text/javascript">
      function moveObj(obj) {
        obj.style.cursor = "move";
        obj.onmousedown = function(e) {
          obj.style.position = "absolute";
          var drag_x  = 0;
          var drag_y  = 0;
          var draging = true;
          var left    = obj.offsetLeft;
          var top     = obj.offsetTop;
          if(typeof document.all !== "undefined") {   //IE
            drag_x = event.clientX;
            drag_y = event.clientY
            document.onmousemove = function(e) {
              if(draging === false) return false;
              obj.style.left = left + event.clientX - drag_x + "px";
              obj.style.top  = top + event.clientY - drag_y + "px"
            }
          } else {    //FF,Chrome,Opera,Safari
            drag_x = e.pageX;
            drag_y = e.pageY;
            document.onmousemove = function(e) {
              if (draging === false) return false;
              obj.style.left = left + e.pageX - drag_x + "px";
              obj.style.top  = top + e.pageY - drag_y + "px"
            }
          }
          document.onmouseup = function() { draging = false; };
        }
      }
    </script>
  </head>
  <body>
    <div style="background-color:#cdf; width:200px;" onmouseover='moveObj(this)'>这个是可以拖动的层1</div>
    <div style="background-color:#fdc; width:200px;" onmouseover='moveObj(this)'>这个是可以拖动的层2</div>
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
    sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
  </body>
</html>

解决方案 »

  1.   

    你可以在你的
    document.onmousemove = function(e) {
    后加如下语句：event.cancelBubble = true;  // IE
    event.returnValue = false; 以下是针对非IE浏览器的
    event.stopPropagation();  //DOM 2
    event.preventDefault();分别表示禁止事件冒泡、禁止浏览器默认行为
      

  2.   

    这样的效果和
    document.body.onselectstart = function() {return false;};
    差不多
    但..........它们都在拖动完后，内容就不可选了哦...
    至少我在IE8下测试后，拖动完内容就不可选了...
    onmouseup的时候是要反过来吧？？(反过来和不做任何动作都一样效果...)
      

  3.   

    怪了...修改成下面这样，如果是点击那2个按钮的话，倒是可以实现不可选和可选间的切换
    但是我把同样的代码加到拖动效果中就只能不可选了...
    DEBUG的时候，确实是执行了
    document.onmouseup = function() {
      document.body.onselectstart = function() {
        event.returnValue=true;
        event.cancelBubble=false;
      }
      draging = false;
    };
    代码啊...
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script language="JavaScript" type="text/javascript">
          function moveObj(obj) {
            obj.style.cursor = "move";
            obj.onmousedown = function(e) {
              obj.style.position = "absolute";
              var drag_x  = 0;
              var drag_y  = 0;
              var draging = true;
              var left    = obj.offsetLeft;
              var top     = obj.offsetTop;
              if(typeof document.all !== "undefined") {   //IE
                drag_x = event.clientX;
                drag_y = event.clientY
                document.onmousemove = function(e) {
                  if(!draging) return false;
                  document.body.onselectstart = function() { return false; };
                  obj.style.left = left + event.clientX - drag_x + "px";
                  obj.style.top  = top + event.clientY - drag_y + "px"
                }
              } else {    //FF,Chrome,Opera,Safari
                drag_x = e.pageX;
                drag_y = e.pageY;
                document.onmousemove = function(e) {
                  if (!draging) return false;
                  obj.style.left = left + e.pageX - drag_x + "px";
                  obj.style.top  = top + e.pageY - drag_y + "px"
                }
              }
              document.onmouseup = function() {
                document.body.onselectstart = function() {
                  event.returnValue=true;
                  event.cancelBubble=false;
                }
                draging = false;
              };
            }
          };
          function x1() {
            document.body.onselectstart = function() { return false; };
          };
          function x2() {
            document.body.onselectstart = function() {
              event.returnValue=true;
              event.cancelBubble=false;
            }
          };
        </script>
      </head>
      <body>
        <div style="background-color:#cdf; width:200px;" onmouseover='moveObj(this)'>这个是可以拖动的层1</div>
        <div style="background-color:#fdc; width:200px;" onmouseover='moveObj(this)'>这个是可以拖动的层2</div>
        <button onclick="x1()">不可选</button><button onclick="x2()">可选</button>
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
      </body>
    </html>
      

  4.   

    目前修改为下面这样
    在IE8和Chrome5下可以用了
    但是FF下依然会反选...哪里弄错了吗？？
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script language="JavaScript" type="text/javascript">
          function moveObj(obj) {
            obj.style.cursor = "move";
            obj.onmousedown = function(e) {
              obj.style.position = "absolute";
              var drag_x  = 0;
              var drag_y  = 0;
              var left    = obj.offsetLeft;
              var top     = obj.offsetTop;
              drag_x = document.all ? event.clientX : e.pageX;
              drag_y = document.all ? event.clientY : e.pageY;
              var draging = function(e) {
                document.body.onselectstart = function() { return false; };
                if(document.all) {
                  obj.style.left = left + event.clientX - drag_x + "px";
                  obj.style.top  = top + event.clientY - drag_y + "px";
                } else {
                  obj.style.left = left + e.pageX - drag_x + "px";
                  obj.style.top  = top + e.pageY - drag_y + "px";
                  e.stopPropagation();
                  e.preventDefault();
                }
              };
              var delEvent = function(e) {
                document.body.onselectstart = function() {
                  if(document.all) {
                    event.returnValue=true;
                    event.cancelBubble=false;
                  }
                };
                if(document.all) {
                  document.detachEvent("onmousemove", draging);
                  document.detachEvent("onmouseup", delEvent);
                } else {
                  document.removeEventListener("mousemove", draging, false);
                  document.removeEventListener("mouseup", delEvent, false);
                }
              };          if(document.all) {
                document.attachEvent("onmousemove", draging);
                document.attachEvent("onmouseup", delEvent);
              } else {
                document.addEventListener("mousemove", draging, false);
                document.addEventListener("mouseup", delEvent, false);
              }
            }
          };
        </script>
      </head>
      <body>
        <div style="background-color:#cdf; width:200px;" onmouseover='moveObj(this)'>这个是可以拖动的层1</div>
        <div style="background-color:#fdc; width:200px;" onmouseover='moveObj(this)'>这个是可以拖动的层2</div>
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
        sdfkjskdjflksjdflkjsakdljfslkadjflksjdfk<br />lsjdlfkjskldjfksldjf<br />
      </body>
    </html>
      

  5.   

    加上function disableSelection(target){
    if (typeof target.onselectstart!="undefined") //IE route
    target.onselectstart=function(){return false}
    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
    target.style.MozUserSelect="none"
    else //All other route (ie: Opera)
    target.onmousedown=function(){return false}
    target.style.cursor = "default"
    }然后
    <script language="JavaScript" type="text/javascript">
          function moveObj(obj) {
           disableSelection(obj)        obj.style.cursor = "move";
    ...........
      

  6.   

    在IE6下完美
    但在IE7和IE8下，有时候也是会选中(点击第二个DIV层的文字，然后拖动，出现选中的几率比较高)
    其他浏览器都完美了，就Opera 10.62版本完全无效 (—_—|||
      

  7.   

    嗯...
    在Opera下，如果是将DOM绑定为document.body的话，倒是可以实现不可选
    但是拖动完内容就真的不可选了...
    disableSelection(document.body)
      

  8.   

    算是解决了...
    http://www.cnblogs.com/consatan/archive/2010/10/11/1848158.html
    这个号只是马甲而已啦...(—_—||)
    <!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" />
        <style type="text/css">
          .mdiv {
            width:200px;
            height:30px;
            line-height:30px;
            text-align:center;
            font-size:1em;
            font-family:'宋体',Arial,Tahoma,sans-serif;
            font-weight:bold;
          }
        </style>
        <script language="JavaScript" type="text/javascript">
          function moveObj(obj) {
            obj.style.cursor = "move";
            obj.onmousedown = function(e) {
              obj.style.position = "absolute";
              var top = obj.offsetTop;
              var left = obj.offsetLeft;
              var drag_x = document.all ? event.clientX : e.pageX;
              var drag_y = document.all ? event.clientY : e.pageY;
              var selection = disableSelection(document.body);
              var move = function(e) {
                obj.style.left = left + (document.all ? event.clientX : e.pageX) - drag_x + "px";
                obj.style.top  = top + (document.all ? event.clientY : e.pageY) - drag_y + "px";
              };
              var stop = function(e) {
                removeEvent(document, "mousemove", move);
                removeEvent(document, "mouseup", stop);
                if(selection) {
                  selection();
                  delete selection;
                }
              };
              addEvent(document, "mousemove", move);
              addEvent(document, "mouseup", stop);
              selection();
            }
          };      function addEvent(target, type, listener, capture) { return eventHandler(target, type, listener, true, capture); };      function removeEvent(target, type, listener, capture) { return eventHandler(target, type, listener, false, capture); };      function eventHandler(target, type, listener, add, capture) {
            type = type.substring(0, 2) === "on" ? type.substring(2) : type;
            if(document.all) {
              add ? target.attachEvent("on"+type, listener) : target.detachEvent("on"+type, listener);
            } else {
              capture = (typeof capture === "undefined" ? true : (capture === "false" ? false : ((capture === "true") ? true : (capture ? true : false))));
              add ? target.addEventListener(type, listener, capture) : target.removeEventListener(type, listener, capture);
            }
          };      function disableSelection(target) {
            var disable = true;
            var oCursor = document.all ? target.currentStyle["cursor"] : window.getComputedStyle(target, null).getPropertyValue("cursor");
            var returnFalse = function(e) {
              e.stopPropagation();
              e.preventDefault();
              return false;
            };
            var returnFalseIE = function() { return false; };
            var selection = function() {
              if(document.all) {
                disable ? addEvent(target, "selectstart", returnFalseIE) : removeEvent(target, "selectstart", returnFalseIE);
              } else {
                disable ? addEvent(target, "mousedown", returnFalse, false) : removeEvent(target, "mousedown", returnFalse, false);
              }
              target.style.cursor = disable ? "default" : oCursor;
              disable = !disable;
            };
            return selection;
          };
        </script>
      </head>
      <body>
        <div class="mdiv" style="background-color:#cdf;" onmouseover='moveObj(this)'>这个是可以拖动的层1</div>
        <div class="mdiv" style="background-color:#fdc;" onmouseover='moveObj(this)'>这个是可以拖动的层2</div>
        <div>dfgkjsdkgjsjdf<br/>skdjfksjdflkjskdlf<br/></div>
      </body>
    </html>