JavaScript 实现拖拽

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

用javascript实现简单的拖拽.

作者：野马笑了来源：CSDN 2008年3月17日

由于要实现一些拖拽，主要使用了prototpye.js,于是就使用了dragdrop.js, 在使用以前自己写了个简单拖拽，个人觉得原理是一致的。
1 对需要拖拽的部分处理mousedown事件，目的就是定为该object的parent
2 在其容器内处理处理mousemove，mouseup mousemove目的就是规定移动的动作，mouseup的目的就是释放当前的操作object，以可以实现下次的拖拽动作。

<html>

<head>

.DragFrame{

position:absolute;

border:1px solid #000;

overflow:hidden;

}

.header{

height:4px;

background-color:#00F;

}

.ContentNow{

font-size:0.7em;

font-family:arial;

padding:2px;

padding-top:5px;

overflow:hidden;

}

.footer{

position:absolute;

bottom:-1px;

border-top:1px solid #000;

height:4px;

width:100%;

font-size:0.8em;

background-color:red;

}

</style>

var dragObject = false;

var dragheader = false;

var dragfooter = false;

var orignalLength = 0;

function dragHeader(obj,ev)

{

dragheader = true;

dragObject = obj.parentNode;

var dragLeft = dragObject.style.left.replace('px','')/1;

e = ev;

orignalLength = e.clientX-dragLeft;

return false;

}

function dragFooter(obj)

{

dragObject = obj.parentNode;

dragfooter = true;

return false;

}

function mouseUp(e)

{

if(!dragObject)return;

dragObject = false;

dragheader = false;

dragfooter = false;

orignalLength = 0;

}

function mouseMove(e)

{

if(document.all) e = event;

if(!dragObject)return;

var dragTop;

var dragLeft;

var tmpHeight;

if( dragfooter )

{

dragTop = dragObject.style.top.replace('px','')/1;

tmpHeight = e.clientY - dragTop;

dragObject.style.height = tmpHeight + 'px';

}

if( dragheader )

{

dragTop = dragObject.style.top.replace('px','')/1;

dragLeft = dragObject.style.left.replace('px','')/1;

//if(orignalLength > e.clientX-dragLeft)

dragLeft = dragLeft+(e.clientX-dragLeft);

// else

// dragLeft = dragLeft-(e.clientX-dragLeft);

dragObject.style.top = e.clientY + 'px';

dragObject.style.left = e.clientX+ 'px';

}

</script>

</head>

<body >

<SPAN>Drag header or Drag the bottom!</SPAN>

</DIV>

</DIV>

</div>

</body>

</html>

Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

JavaScript 实现拖拽

业界热点: