• 兼容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代码更少。

  • 相关阅读:
    [Everyday Mathematics]20150208
    [Everyday Mathematics]20150207
    [Everyday Mathematics]20150206
    数学基本技艺100题
    这天,白云酒楼里来了两位客人
    [Everyday Mathematics]20150205
    [Everyday Mathematics]20150204
    数学书籍阅读
    国科金发计〔2014〕86号
    [Everyday Mathematics]20150203
  • 原文地址:https://www.cnblogs.com/natureclove/p/pageone.html
Copyright © 2020-2023  润新知