JS实现遮罩层和DIV层的drag

　　原来一直以为实现层的拖动是很难的事，今天动手实现了一遍，觉得也没有啥！
主要是事件的监听和层的位置的计算，搞通这两点，实现起来自然也就没有问题了。

啥也不说，上代码：
演示地址：http://www.deephp.com/jquery/drag/

<!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" />
<title>js实现层拖动 www.deephp.com</title>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function show_mask_div()
{
    if(!$('#mask_div')[0])
    {
        $('body').append('<div id="mask_div" style="height:100%;width:100%;background-color:#C0C0C0;left:0;    filter:alpha(opacity=75);    -moz-opacity: 0.75;    opacity: 0.75;position:absolute;top:0;z-index:1; display: none;"></div>');
    }
    var h = $(document).height();
    var w = $(document).width();
    $('#mask_div').height(h).width(w).show();
}
function hide_mask_div()
{
    $('#mask_div').hide();
}

function show_content_div()
{
    show_mask_div();
    var offset = $('#click_me').offset();
    var l = offset.left;
    var t = offset.top;
    $('#content_div').css({'top':t+'px', 'left':l+'px'}).show();
}

var data = {};
var drag_state = false;
window.onload = function(){
$("#click_me").click(function() {
    show_content_div();
});
$('#close').click(function() {
    $('#content_div').hide();
    $('#mask_div').hide();
});

// 当按下鼠标时,开始监听
$('#title_tab').mousedown(function(e) {
    data = {x:e.clientX, y:e.clientY};
    drag_state = true;
});
$(document).mouseup(function(e) {
    drag_state = false;
});
$(document).mousemove(function(e) {
    if(drag_state) {
      var x = e.clientX;
      var y = e.clientY;
      var xx = x-data.x;
      var yy = y-data.y;
      if(xx != 0 || yy != 0)
      {
          cl = parseInt($('#content_div').css('left')) + xx;
          ct = parseInt($('#content_div').css('top')) + yy;
          cl = ((cl) > $('#mask_div').width()) ? $('#mask_div').width():cl;
          ct = ((ct) > $('#mask_div').height()) ? $('#mask_div').height():ct;
          $('#content_div').css({'left':cl + 'px', 'top':ct + 'px'});
      }
      data = {x:e.clientX, y:e.clientY};
    }
});
}
</script>
</head>
<body>
<p> </p>
<p style="text-align:center;"><a href="javascript:void(0);" id="click_me">点我</a></p>
<div id="content_div" style="padding:1px;width:300px;border:#f60 1px solid;background:#fff;position:absolute;z-index:5;display:none;">
<div id="title_tab" style="cursor:move;background:#ff6600;padding:3px;"><a href="javascript:void(0);" style="float:right" id="close">关闭</a>点我可以拖动哦！</div>
<div id="content" style="padding:5px;"><span id='dir001_com'><br/><br>第一分类目录<br><a href='http://www.dir001.com'>http://www.dir001.com</a></span></div>
</div>

</body>
</html>

深入PHP

搜索

热门标签

JS实现遮罩层和DIV层的drag