怎么用javascript进行拖拽第1/2页 | 学步园

返回顶部
查看留言
转到底部

现在的位置: 首页 > 综合 > 正文

怎么用javascript进行拖拽第1/2页

2013年01月02日 ⁄ 综合 ⁄ 共 3098字 ⁄ 字号小中大 ⁄ 评论关闭

本文译自：http://www.webreference.com/programming/javascript/mk/column2/index.html
所有版权归原文所有

Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．

有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！

网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素．

<script src="http://www.blueidea.com/articleimg/2006/07/3791/drag_drop.js" type="text/javascript"></script><br />
<style type="text/css">LI {
 MARGIN-BOTTOM: 10px
}
OL {
 MARGIN-TOP: 5px
}
.DragContainer {
 BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
 BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
 BACKGROUND-COLOR: #eee
}
.DragBox {
 BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
 BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.DragDragBox {
 BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.miniDragBox {
 BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
 BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
 BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
 FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc
}
LEGEND {
 FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial
}
FIELDSET {
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.History {
 FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px
}
#DragContainer8 {
 BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px
}
.miniDragBox {
 FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px
}
PRE {
 BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #f8f8f0
}
</style>
<fieldset id="Demo4">
<legend>样例- 拖拽页面元素</legend>
<div>
<div class="DragContainer" id="DragContainer4" overclass="OverDragContainer">
<div class="DragBox" id="Item1" overclass="OverDragBox" dragclass="DragDragBox">Item #1</div>
<div class="DragBox" id="Item2" overclass="OverDragBox" dragclass="DragDragBox">Item #2</div>
<div class="DragBox" id="Item3" overclass="OverDragBox" dragclass="DragDragBox">Item #3</div>
<div class="DragBox" id="Item4" overclass="OverDragBox" dragclass="DragDragBox">Item #4</div>
</div>
<div class="DragContainer" id="DragContainer5" overclass="OverDragContainer">
<div class="DragBox" id="Item5" overclass="OverDragBox" dragclass="DragDragBox">Item #5</div>
<div class="DragBox" id="Item6" overclass="OverDragBox" dragclass="DragDragBox">Item #6</div>
<div class="DragBox" id="Item7" overclass="OverDragBox" dragclass="DragDragBox">Item #7</div>
<div class="DragBox" id="Item8" overclass="OverDragBox" dragclass="DragDragBox">Item #8</div>
</div>
<div class="DragContainer" id="DragContainer6" overclass="OverDragContainer">
<div class="DragBox" id="Item9" overclass="OverDragBox" dragclass="DragDragBox">Item #9</div>
<div class="DragBox" id="Item10" overclass="OverDragBox" dragclass="DragDragBox">Item #10</div>
<div class="DragBox" id="Item11" overclass="OverDragBox" dragclass="DragDragBox">Item #11</div>
<div class="DragBox" id="Item12" overclass="OverDragBox" dragclass="DragDragBox">Item #12</div>
</div>
</div>
</fieldset>
<p>

返回

【上篇】简单操作让你的.NET托管程序启动更快、体积更小
【下篇】最好的免费书籍，视频，教程和更多的学习jQuery的资源

作者: deprived

该日志由 deprived 于11年前发表在综合分类下，最后更新于 2013年01月02日.
转载请注明: 怎么用javascript进行拖拽第1/2页 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园保留所有权利.
软文销售 QQ客服：2265327166

点击这里给我发消息

（其他合作也可洽谈）