省时间, jq$(document).click(doMouseClick);//initfunction doMouseClick(e){ var left = e.pageX; var top = e.pageY; //you can set its position here createDiv(...);//param here }function createDiv(param1, param2, ...){ //DRAG, you may use jq.drag.js or write it yourself //simple example var div = $("<div></div>"); $(div).mousedown(...); //bind a func here, follow the cursor $(div).mouseup(...); // unbind the func above }
var left = e.pageX;
var top = e.pageY; //you can set its position here
createDiv(...);//param here
}function createDiv(param1, param2, ...){
//DRAG, you may use jq.drag.js or write it yourself
//simple example
var div = $("<div></div>"); $(div).mousedown(...); //bind a func here, follow the cursor
$(div).mouseup(...); // unbind the func above
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新建文本文档</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
</head> <body>
<div class="dragAble" style="width:200px;height:200px;background:green;"></div>
<div class="dragAble" style="width:400px;height:400px;background:red;"></div>
<script type="text/javascript">
<!--
document.write("<style type='text/css'>.dragAble{position:relative;cursor:move;}</style>");
var dragAble_ie = document.all;
var dragAble_nn6 = document.getElementById && !document.all;
var dragAble_isdrag = false;
var dragAble_y, dragAble_x;
var dragAble_oDragObj;
function dragAble_moveMouse(e) {
if (dragAble_isdrag) {
dragAble_oDragObj.style.top = (dragAble_nn6 ? nTY + e.clientY - dragAble_y : nTY + event.clientY - dragAble_y) + "px";
dragAble_oDragObj.style.left = (dragAble_nn6 ? nTX + e.clientX - dragAble_x : nTX + event.clientX - dragAble_x) + "px";
return false;
}
}
var dragAble_img_id;
function dragAble_initDrag(e) {
var oDragHandle = dragAble_nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = dragAble_nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className == "dragAble") {
dragAble_isdrag = true;
dragAble_oDragObj = oDragHandle;
dragAble_img_id = dragAble_oDragObj.id;
nTY = parseInt(dragAble_oDragObj.style.top + 0);
dragAble_y = dragAble_nn6 ? e.clientY : event.clientY;
nTX = parseInt(dragAble_oDragObj.style.left + 0);
dragAble_x = dragAble_nn6 ? e.clientX : event.clientX;
document.onmousemove = dragAble_moveMouse;
return false;
}
}
document.onmousedown = dragAble_initDrag;
document.onmouseup = dragAble_dragimg;
function dragAble_dragimg(e) {
dragAble_isdrag = false;
}
//-->
</script>
</body>
</html>加一个div，然后class="dragAble"就搞可以。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var flag = false;
var x,y;
function startDrag(obj){
flag = true;
x = event.x;
y = event.y;
}
function showDivXy(divobj){
//window.status = 'x:' + event.x + " y:" + event.y;
//var divall = document.getElementsByTagName("div");
//var divobj = divall[0];
if(flag){
var left = divobj.style.left.replace("px","");
var top = divobj.style.top.replace("px","");
divobj.style.left = left-'0' + event.x - x;
divobj.style.top = top-'0' + event.y - y;
x = event.x;
y = event.y;
}
} function stopDrag(obj){
flag = false;
}
function showDiv(){
var divall = document.getElementsByTagName("div");
var divobj = divall[0]; divobj.style.display="block"
return false;
}
//-->
</SCRIPT>
</HEAD><BODY oncontextmenu="return showDiv()">
<div onmousemove="showDivXy(this)" onmousedown="startDrag(this)" onmouseup="stopDrag(this)" style="background-color:#cfdfef;width:200px;height:100px;position:absolute;display:none;left:100px;top:100px;">大家好，我是层</div>
</BODY>
</HTML>
看看这个，应该是你想要的吧。按右键
//oDragObj需要拖动的整个对象
function initDragable(oDragObj){
if (!oDragObj) return;
var bDraged = false;
oDragObj.onmousedown = function(){
event.srcElement.style.cursor = "move";
oDragObj.lastX = event.clientX ;//- ofs.l;
oDragObj.lastY = event.clientY ;//- ofs.t;
bDraged = true;
};
oDragObj.onmousemove = function(){
if (!bDraged) return;
oDragObj.setCapture();
if(oDragObj.offsetTop+(event.clientY - oDragObj.lastY) > 0){
oDragObj.style.top = oDragObj.offsetTop+(event.clientY - oDragObj.lastY);
}
else
oDragObj.style.top = 0;
if(oDragObj.offsetLeft+(event.clientX - oDragObj.lastX) > 0)
oDragObj.style.left = oDragObj.offsetLeft+(event.clientX - oDragObj.lastX);
else
oDragObj.style.left = 0;
oDragObj.lastX = event.clientX ;//- ofs.l;
oDragObj.lastY = event.clientY ;//- ofs.t;
};
oDragObj.onmouseup = function(){
bDraged = false;
oDragObj.releaseCapture();
event.srcElement.style.cursor = "default";
};
}
function show(str){
var oDiv = document.all("myDiv");
if(oDiv == null){
oDiv = document.createElement("<div>");
oDiv.id = "myDiv";
oDiv.style.border="1 solid black";
oDiv.style.height="100px";
oDiv.style.width="200px";
oDiv.style.backgroundColor="#fff000";
document.body.appendChild(oDiv);
initDragable(oDiv);
}
oDiv.style.position = "absolute";
oDiv.style.left = event.clientX;
oDiv.style.top = event.clientY;
oDiv.style.textAlign="center";
oDiv.innerText = str;
return false;
}
//-->
</SCRIPT>
<BODY oncontextmenu="return show('please drag me')">
</BODY>