js 拖动层效果[实例]

<a href="javascript:void(0);" onclick="showDiv()" >请点击我</a><div style="width:300px;height:100;border:1px solid #CCCCCC;position:absolute;display:none;left:392px;top:187px;z-index:9000px;cursor:move;" id="showId"><h3>标题</h3><p>请点击我请点击我请点击我请点击我请点击我请点击我请点击我请点击我请点击我请点击我</p></div>

function showDiv(){$('#showId').append('<span style=\"position:absolute;right:3px;top:1px;\"><a href=\"javascript:void(0)\" onclick=\"closeShow(this)\">X</a></span>');$('#showId').toggle();closeShow=function(obj){$(obj).parent().remove();$('#showId').hide();}var  posX;var  posY;var showIdDiv = document.getElementById("showId");//鼠标按下事件showIdDiv.onmousedown=function(event){var event = event || window.event;posX = event.clientX - parseInt($('#showId').css('left'));posY = event.clientY - parseInt($('#showId').css('top'));showIdDiv.onmousemove = mousemove}//鼠标移动事件  mousemove = function(event){var event = event || window.event;$('#showId').css('left',event.clientX-posX);$('#showId').css('top',event.clientY-posY);}//鼠标按上事件showIdDiv.onmouseup = function(){    document.getElementById("showId").onmousemove = null;}}