MooTools教程(12):Drag.Move来实现拖放

作者佚名技术来源网页制作浏览发布时间 2012-03-07

注意一下CSS：在IE中，为了能够适合地注册Drag.Move的容器，你需要在下面的CSS中明确地指出它的位置。最重要的一点是你需要记住设置容器的位置为“position: relative”，而设置可拖动的元素的位置为“position: absolute”，然后一定要设置可拖动元素的left和top属性。现在，如果你正在为其他浏览器构建并且遵循此规则，你可以忽略这一部分：

参考代码： [复制代码] [保存代码]

/* 下面这个定义通常是不错的主意 */
body {
margin: 0
padding: 0
}
/* 确保可拖动的元素有"position: absolute" */
/* 并设置开始时的left和top属性 */
#drag_me {
width: 100px
height: 100px
background-color: #333
position: absolute
top: 0
left: 0
}
#drop_here {
width: 200px
height: 200px
background-color: #eee
}
/* 确保拖动的容器有“position:relative” */
#drag_cont {
background-color: #ccc
height: 600px
width: 500px
position: relative
margin-top: 100px
margin-left: 100px
}
#drag_me_handle {
width: 100%
height: auto
background-color: #666
}
#drag_me_handle span {
display: block
padding: 5px
}
.indicator {
width: 100%
height: auto
background-color: #0066FF
border-bottom: 1px solid #eee
}
.indicator span {
padding: 10px
display: block
}
.draggable {
width: 200px
height: 200px
background-color: blue
}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3 4 5 6 7 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: MooTools教程(2):DOM选择器下一篇: MooTools教程(14):定时器和Hash对象

关于MooTools教程(12):Drag.Move来实现拖放的所有评论

随机推荐