<!DOCTYPE HTML>
<html>
<head>
<title>type your title</title>
<meta charset="utf-8">
<style type="text/css" media="screen">
.blackLayer{
width:200px;
height:200px;
border:1px solid gray;
background-color:black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript" charset="utf-8">
var layerInfo={
tagName:"div",
className:"blackLayer",
startPosition:{x:100,y:100}
};
function dragLayer(tagName,className,startPosition){
var tageName=tagName||'div';
var divLayer=document.createElement(tagName),
startPosition=startPosition||{};
divLayer.className=className;
// function toHex(str){
// var result='';
// for (var i =0; i <str.length; i++) {
// result+='\\u'+str.charCodeAt(i).toString(16);//or result+='\\u'+str[i].charCodeAt().toString(16);
// };
// return result;
// };
// console.log(toHex('可拖动的容器'));
divLayer.innerHTML="\u53ef\u62d6\u52a8\u7684\u5bb9\u5668";
divLayer.style.position="absolute";
divLayer.style.left=startPosition.x+'px';
divLayer.style.top=startPosition.y+'px';
document.body.appendChild(divLayer);
var drag=false,
iniLeft,
iniTop;
divLayer.onmousedown=function(e){
drag=true;
var layerLeft=divLayer.style.left||0,
layerTop=divLayer.style.top||0,
currentPosition={
l:parseInt(layerLeft)||0,
t:parseInt(layerTop)||0
};
iniLeft=e.clientX-currentPosition.l;
iniTop=e.clientY-currentPosition.t;
};
document.onmousemove=function(e){
if(drag){
divLayer.style.left=(e.clientX-iniLeft)+'px';
divLayer.style.top=(e.clientY-iniTop)+'px';
}
};
document.onmouseup=function(){
drag=false;
}
};
window.onload=function(){
var divLayer=new dragLayer(layerInfo.tagName,layerInfo.className,layerInfo.startPosition);
};
</script>
</body>
</html>
|
