正确答案是这样,好好去理解一下this.<html> <head> <title>鼠标拖曳</title> </head> <body> <div id="div1" style="position:absolute;width:150px;height:100px;background-color:blue;"> abcd </div> <script language="javascript"> var Class = { create: function () { return function () { this.initialize.apply(this, arguments); }; } }; var drag = Class.create(); drag.prototype = { initialize : function() { var dr = this; dr.o = null; }, setObject : function(o) { var dr = this; dr.o = o; o.self = this; dr.bind(); }, bind : function() { var dr = this;
if (dr.o){ if (dr.o.attachEvent){ dr.o.attachEvent('onmousedown',dr.mousedown); dr.o.attachEvent('onmousemove',dr.mousemove); dr.o.attachEvent('onmouseout',dr.mouseout); dr.o.attachEvent('onmouseup',dr.mouseup); } else if (dr.o.addEventListener) { dr.o.addEventListener('mousedown',dr.mousedown,true); dr.o.addEventListener('mousemove',dr.mousemove,true); dr.o.addEventListener('mouseup',dr.mouseup,true); dr.o.addEventListener('mouseout',dr.mouseout,true); } } }, mousedown : function() { var dr = this.self; dr.b = true; }, mouseup : function () { var dr = this.self; dr.b = false; }, mouseout : function () { var dr = this.self; dr.b = false; }, mousemove : function() { var e = arguments[0]; var dr = this.self; if (dr.b) {//此处 在 mf下 dr.b仍然存在,但到 下面的 dr.o时却是 undefined,ie可正常起作用 dr.o.style.left = e.clientX - dr.o.offsetWidth/2 + 'px'; dr.o.style.top = e.clientY - dr.o.offsetHeight/2 + 'px'; } } }; var o = document.getElementById('div1'); var drag = new drag(); drag.setObject(o); </script> </body> </html>
第一次见。。 fason(咖啡人生) 的说。
self 不理解~~书上说 : Retrieves a reference to the current window or frame. 获取对当前窗口或框架的引用。 setObject : function(o) { var dr = this; dr.o = o; o.self = this; dr.bind(); }, 此处的o是一个div element 没有self属性啊~还有这个var dr = this 和o.self = this 的this的意思也不懂了
嘿嘿。。散过啦。。那天你没来 /gg http://community.csdn.net/Expert/topic/5520/5520751.xml?temp=.8313715 这个是散分的地址。。 已经结帖子啦。to ls o.self = this; 这句话不是给o加了个self属性么?
var ipt = document.getElementsByTagName("input");//禁掉单复选框 for(var i = 0; i < ipt.length; i++) { ipt[i].disabled = true; } }
function setChild(div,Evt) { var evt = Evt?Evt:(window.event?window.event:null); //可否移动、调整 var isMove = document.getElementById("isMove").checked;//true or false var isResize = document.getElementById("isResize").checked;
//关闭DIV function eCloseDiv() { if (div) { div.parentNode.removeChild(div); var ipt = document.getElementsByTagName("input"); for(var i = 0; i < ipt.length; i++) { ipt[i].disabled = false; } div = null; } }
<head>
<title>鼠标拖曳</title>
</head>
<body>
<div id="div1" style="position:absolute;width:150px;height:100px;background-color:blue;">
abcd
</div>
<script language="javascript">
var Class = {
create: function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};
var drag = Class.create();
drag.prototype = {
initialize : function() {
var dr = this;
dr.o = null;
},
setObject : function(o) {
var dr = this;
dr.o = o;
o.self = this;
dr.bind();
},
bind : function() {
var dr = this;
if (dr.o){
if (dr.o.attachEvent){
dr.o.attachEvent('onmousedown',dr.mousedown);
dr.o.attachEvent('onmousemove',dr.mousemove);
dr.o.attachEvent('onmouseout',dr.mouseout);
dr.o.attachEvent('onmouseup',dr.mouseup);
}
else if (dr.o.addEventListener) {
dr.o.addEventListener('mousedown',dr.mousedown,true);
dr.o.addEventListener('mousemove',dr.mousemove,true);
dr.o.addEventListener('mouseup',dr.mouseup,true);
dr.o.addEventListener('mouseout',dr.mouseout,true);
}
}
},
mousedown : function() {
var dr = this.self;
dr.b = true;
},
mouseup : function () {
var dr = this.self;
dr.b = false;
},
mouseout : function () {
var dr = this.self;
dr.b = false;
},
mousemove : function() {
var e = arguments[0];
var dr = this.self;
if (dr.b) {//此处 在 mf下 dr.b仍然存在,但到 下面的 dr.o时却是 undefined,ie可正常起作用
dr.o.style.left = e.clientX - dr.o.offsetWidth/2 + 'px';
dr.o.style.top = e.clientY - dr.o.offsetHeight/2 + 'px';
}
}
};
var o = document.getElementById('div1');
var drag = new drag();
drag.setObject(o);
</script>
</body>
</html>
fason(咖啡人生)
的说。
Retrieves a reference to the current window or frame.
获取对当前窗口或框架的引用。 setObject : function(o) {
var dr = this;
dr.o = o;
o.self = this;
dr.bind();
}, 此处的o是一个div element 没有self属性啊~还有这个var dr = this 和o.self = this 的this的意思也不懂了
/gg
http://community.csdn.net/Expert/topic/5520/5520751.xml?temp=.8313715
这个是散分的地址。。
已经结帖子啦。to ls
o.self = this;
这句话不是给o加了个self属性么?
俺来这里使用 fcsdnjs 快捷....瞧了就溜...
http://community.csdn.net/Expert/ForumList.asp?typenum=1&roomid=304
<script type="text/javascript">
function getEvent()
{
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null; }
//保留的位置
var saveLeft,saveTop,saveWidth,saveHeight;
//var theBody;
var eventType; //事件种类, "move"、"resize"
var div;
//创建并设定div的参数
function setDiv()
{
var evt = getEvent();
//防止重复打开
if (div)
{
return;
}
var newLeft,newTop,newWidth,newHeight;
//theBody = document.body;
div = document.createElement("div");
div.id = "panelDiv";
div.style.position = "absolute";
div.style.backgroundColor = "#E5E5E5"
div.style.padding = "2px 5px 5px 2px";
div.style.overflow = "hidden";
div.style.zIndex = 1;
//设定打开的大小和位置
Function()
{
var openType = document.getElementById("radio1").checked ? 0 : 1;
if (openType == 0) //默认大小默认位置居中打开
{
newWidth = "300px";
newHeight = "300px";
newLeft = (document.body.clientWidth - parseInt(newWidth)) / 2 + "px";
newTop = (document.body.clientHeight - parseInt(newHeight)) / 2 + "px";
}
else //存储的位置与大小
{
newWidth = saveWidth ? saveWidth : "300px";
newHeight = saveHeight ? saveHeight : "300px";
newLeft = saveLeft ? saveLeft : (document.body.clientWidth - parseInt(newWidth)) / 2 + "px";
newTop = saveTop ? saveTop : (document.body.clientHeight - parseInt(newHeight)) / 2 + "px";
}
div.style.width = newWidth;
div.style.height = newHeight;
div.style.left = newLeft;
div.style.top = newTop;
}
div = setChild(div,evt);//self defined function
document.body.appendChild(div);//
var ipt = document.getElementsByTagName("input");//禁掉单复选框
for(var i = 0; i < ipt.length; i++)
{
ipt[i].disabled = true;
}
}
function setChild(div,Evt)
{
var evt = Evt?Evt:(window.event?window.event:null);
//可否移动、调整
var isMove = document.getElementById("isMove").checked;//true or false
var isResize = document.getElementById("isResize").checked;
//底色
var backDiv = document.createElement("div");
backDiv.style.cssText = "left: 0px; top: 0px; width: 100%; height: 100%; background-color: #F5F5F5;";//整个窗口
div.appendChild(backDiv);
//标题
var topDiv = document.createElement("div");
topDiv.style.cssText = "left: 2px; top: 2px; width: 100%; height: 30px; position: absolute; background-color: #78ABFF; vertical-align: middle; z-index: 5";
if (isMove)
{
topDiv.style.cursor = "move";//鼠标十字箭头
topDiv.onmousedown=new Function("setMove()");
}
else
{
topDiv.style.cursor = "default";
}
topDiv.innerHTML = "<span style='top: 5px; left:5px; font-size: 20px; font-weight: bold; color: #102548; position: relative;-moz-user-select:none' onselectstart='return false'>标题栏</span>";
div.appendChild(topDiv);
//关闭按钮
var closeDiv = document.createElement("div");
closeDiv.style.cssText = "right: 8px; top : 5px; width: 24px; height: 24px; position: absolute; background-color: #E4EEFF; border: #2D66C4 1px solid; text-align: center; vertical-align: middle; cursor: pointer; z-index: 10";
closeDiv.onclick=new Function("eCloseDiv()");
closeDiv.innerHTML = "<span style='font-size: 20px; font-weight: bold; color: #0E377A;' title='Esc快捷键'>×</span>";
div.appendChild(closeDiv);
//内容
var contentDiv = document.createElement("div");
contentDiv.style.cssText = "left: 2px; top: 35px; width: 100%; position: absolute; overflow: auto";
contentDiv.style.height = (parseInt(div.style.height) - 40) + "px";
contentDiv.innerHTML = "<table style='width: 100%; height: 100%; text-align: center; vertical-align: hidden'><tr><td><p>这里是内容区!</p><a href='javascript:saveDiv()'>保留这个位置和大小</a></td></tr></table>";
div.appendChild(contentDiv);
return div;
}
var oX, oY, oLeft, oTop, oWidth, oHeight; //存储原始移动前的位置original position
var divClone, oDiv; //克隆的节点和原始节点
var oTime;
//clone拖移的节点
function setMove()
{
var evt = getEvent();
var obj = evt.srcElement ? evt.srcElement : evt.target;
if (evt.button == 1)
{
if (oTime)
{
clearTimeout(oTime);
divClone.parentNode.removeChild(divClone);
}
oDiv = obj.parentNode;
divClone = oDiv.cloneNode(true);//如果为 true,则递归地克隆指定节点下的子树;如果为 false,则只克隆该节点本身。
divClone.style.filter = "Alpha(opacity=50)";
divClone.style.opacity="0.5";
divClone.childNodes[1].onmousemove=new Function("startMove()");
divClone.childNodes[1].onmouseup=new Function("endMove()");
oX = parseInt(evt.clientX);
oY = parseInt(evt.clientY);
oLeft = parseInt(divClone.style.left);
oTop = parseInt(divClone.style.top);
oDiv.parentNode.appendChild(divClone);
if(!window.captureEvents)
{
divClone.childNodes[1].setCapture();
}else
{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);//关注两个事件
}
eventType = "move";
}
}
//拖移
function startMove()
{
var evt = getEvent();
var obj = evt.srcElement ? evt.srcElement : evt.target;
if (eventType == "move" && evt.button == 1)
{
var moveDiv = obj.parentNode;
moveDiv.style.left = (oLeft + evt.clientX - oX) + "px";
moveDiv.style.top = (oTop + evt.clientY - oY) + "px";
}
}
//拖移结束调用动画
function endMove()
{
if (eventType == "move")
{
if (!window.captureEvents)
divClone.childNodes[1].releaseCapture();//关闭事件
else
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
move(parseInt(divClone.style.left), parseInt(divClone.style.top));
eventType = "";
}
}
//移动的动画
function move(aimLeft, aimTop)
{
var nowLeft = parseInt(oDiv.style.left);
var nowTop = parseInt(oDiv.style.top);
var moveSize = 30;
if (nowLeft > aimLeft + moveSize || nowLeft < aimLeft - moveSize || nowTop > aimTop + moveSize || nowTop < aimTop - moveSize)
{
oDiv.style.left = aimLeft > nowLeft + moveSize ? (nowLeft + moveSize) + "px" : aimLeft < nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";
oDiv.style.top = aimTop > nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop < nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";
oTime = setTimeout("move(" + aimLeft + ", " + aimTop + ")", 1);//定时递归调用
}
else
{
oDiv.style.left = divClone.style.left;
oDiv.style.top = divClone.style.top;
divClone.parentNode.removeChild(divClone);
divClone == null;
}
}
//关闭DIV
function eCloseDiv()
{
if (div)
{
div.parentNode.removeChild(div);
var ipt = document.getElementsByTagName("input");
for(var i = 0; i < ipt.length; i++)
{
ipt[i].disabled = false;
}
div = null;
}
}
//保留位置和大小
function saveDiv()
{
if (div)
{
saveLeft = div.style.left;
saveTop = div.style.top;
saveWidth = div.style.width;
saveHeight = div.style.height;
alert("保留成功!");
}
}
</script><body>
<p>
<input type="checkbox" id="isMove" /><label for="isMove">可移动</label>
<input type="checkbox" id="isResize" /><label for="isResize">可调整大小</label>
</p>
<p>
<input type="radio" name="radio" id="radio1" checked /><label for="radio1">默认居中打开</label>
<input type="radio" name="radio" id="radio2" /><label for="radio2">保留位置上打开</label>
</p>
<p><a href="javascript:setDiv();">打开DIV</a></p></body>
</html>