Draggable Div - learning for ever

收藏夹(4)

最新评论

1. re: css+div 布局（1）- css+div实现table布局
@Think Tips--引用--------------------------------------------------Think Tips: <ol><span styl...
--幻蓝
2. re: css+div 布局（1）- css+div实现table布局
我觉得 33 楼的说得是最好的了。楼主这样处理让大伙学习下也是好事啦。不过要是项目里这样用的话我是受不了了。数据要TABLE布局大框架的用DIV一些些小的框架什么的用UL OL ...
--幻蓝
3. re: mailto用法
你好
加入 \r\n 後，網頁上是有斷行了.
可是按send mail叫出outlook express，
body裡的內容卻沒有斷行耶.....
--jerrylin33
4. re: mailto用法
@jerrylin33 你可以在需要换行的地方加一个换行符，像下面这样： initBody='use mailto sample\r\nuse mailto sample1\r\nuse mailto...
--agan88
5. re: mailto用法
你好請問一下.小弟在學習mailto用法遇到一個問題. 在initBody='use mailto sample';是輸入一行.如果我預設輸入三行. 如下 use mailto sample 1 u...
--jerrylin33

阅读排行榜

Draggable Div

Css For Draggable Panel

<style>

#draggable{border:1px solid red;position:absolute;

top:10px;left:10px;width:200px;height:140px;z-index:100px;}

#dragHeader

{cursor:move;

background-color: #E0DDD5;

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E0DDD5', EndColorStr='#FFFFFF');

text-align: center;

border-width: 1px;

border-style: none;

padding: 1px 5px 2px 5px;

text-transform: capitalize;

}

#dragContent{background-color: #FFFFFF;}

.active{border-style:dashed;filter:alpha(opacity=20);cursor:not-allowed;}

.docked{border-style:solid;filter:alpha(opacity=100)}

</style>

js文件Drag.js

var dragingObj=null;//dragging object

var mouseOffset;//store the offset position

var initPos; //store the inital position of the dragging object

/**********mouseMove******

hanle mouse move event

*************************/

function mouseMove(evt)

{

evt = evt || window.event;

var mousePos = getMousePos(evt);

if(dragingObj){

dragingObj.style.position = 'absolute';

dragingObj.style.top = mousePos.y - mouseOffset.y;

dragingObj.style.left = mousePos.x - mouseOffset.x;

return false;

}

/**********mouseDown******

hanle mouse down event

*************************/

function mouseDown(evt)

{

evt=evt||window.event;

dragingObj=evt.srcElement.parentElement;

dragingObj.className="active";

mouseOffset=getMouseOffset(dragingObj,evt);

initPos = getPosition(dragingObj);

}

/**********mouseUp******

hanle mouse up event

**************************/

function mouseUp(evt)

{

if(dragingObj)

{

evt=evt||window.event;

dragingObj.className="docked";

dragingObj=null;

}

/**********getPosition******

get obj's position

**************************/

function getPosition(e)

{

var left = 0;

var top = 0;

while(e.offsetParent)

{

left += e.offsetLeft;

top += e.offsetTop;

e = e.offsetParent;

}

left += e.offsetLeft;

top += e.offsetTop;

return {x:left,y:top};

}

/**********getMousePos******

get mouse's coordinate

**************************/

function getMousePos(evt)

{

evt=evt||window.event;

return{

x:evt.clientX+document.body.scrollLeft-document.body.clientLeft,

y:evt.clientY+document.body.scrollTop-document.body.clientTop

};

}

/**********getMouseOffset******

get offset mouse moved

**************************/

function getMouseOffset(target, evt){

evt = evt || window.event;

var docPos = getPosition(target);

var mousePos = getMousePos(evt);

return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};

}

function dragStart(obj)

{

obj.onmousedown=mouseDown;

}

/***add mouse event hander***/

document.onmouseup = mouseUp;

document.onmousemove=mouseMove;

have a try,Drag following Div

drag me

this is a sample for draggable div

Tag标签: css,div,Draggable

posted on 2008-04-25 22:27 Agan@CN 阅读(512) 评论(3) 编辑收藏网摘所属分类: JavaScript CSS

与我联系

搜索

我参加的小组

我参与的团队

随笔档案(15)

收藏夹(4)

最新随笔

积分与排名

最新评论

阅读排行榜