zoukankan      html  css  js  c++  java
  • 兼容ie ff 等浏览器的jquery,js层移动方法一

    <script type="text/javascript">  
    function Mmousedown(i,e){
    var imgClick = false;
        var imgLeft;//单击时img的left值
        var imgTop;//单击时img的top值
        var mouseX;//单击时鼠标的x值
        var mouseY;//单击时鼠标的y值

        imgClick = true;
        mouseX = e.clientX;
        mouseY = e.clientY;
        imgLeft = $('#d'+i).offset().left;
        imgTop = $('#d'+i).offset().top;
        mmove(i,imgLeft,imgTop,mouseX,mouseY,imgClick);
    }
    function mmove(i,imgLeft,imgTop,mouseX,mouseY,imgClick){
        $(document).bind("mousemove",function(e){
        window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();
        if(imgClick){
            $('#t'+i).css({left:e.clientX - (mouseX - imgLeft),top:e.clientY - (mouseY - imgTop)});
            $('#d'+i).css({left:e.clientX - (mouseX - imgLeft),top:e.clientY - (mouseY - imgTop)});
        }
    });
    $(document).mouseup(function(){
        imgClick = false;
    });
    }

    function Cclick(i){
    /*$('div[name="tuodong"]').each(function(){
            $("#"+i).css("z-index","1000");
            alert($("#"+i).css("z-index"));
        });*/
        $(".tuodong").css("z-index","1000");
        $("#d"+i).css("z-index","10000");
        //alert($("#"+i).css("z-index"));
        
    }
    </script>

    <style type="text/css">  
    .drag{100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;;cursor:move;}  
    </style>  
     
    <!--模块拖拽-->  
    <div class="drag tuodong" id="d1" onmousedown="Mmousedown(1,event)"  onclick="Cclick(1)" style="position:absolute;top:100px;left:20px">这个层是可以拖动滴 ^_^ <br />  </div> 

    <div class="drag tuodong" id="d2" onmousedown="Mmousedown(2,event)"  onclick="Cclick(2)" style="position:absolute;top:100px;left:20px">这个层是可以拖动滴 ^_^ <br />  </div>

    <div class="drag tuodong" id="d3" onmousedown="Mmousedown(3,event)"  onclick="Cclick(3)" style="position:absolute;top:100px;left:20px">这个层是可以拖动滴 ^_^ <br />  </div>

    上述是一种方法还有一种方法哦!而且更简单,功能实现也是一样的。js代码更少。

  • 相关阅读:
    Java实现荷兰国旗问题
    Java实现荷兰国旗问题
    QTcpSocket 对连接服务器中断的不同情况进行判定(六种情况,其中一种使用IsNetworkAlive API方法)
    怀旧老游戏
    我的第一个Chrome插件:天气预报应用
    ddd
    Android 反编译工具
    ASP.NET MVC局部视图
    jQuery类库的设计
    jquery+html三级联动下拉框
  • 原文地址:https://www.cnblogs.com/natureclove/p/pageone.html
Copyright © 2011-2022 走看看