这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 javascript 拖拽应用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
之前文章中也讲了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图:
就是这样一个简单的一个拖拽条,你可以把它理解为滚动条,也可以理解为表单中的数量选择控件,也可以理解为进度条,等等,反正你可以改成很多你想要的效果,废话不多说,我们来看看这个是怎么做的吧!
想了想,感觉原理就不用说了吧,我在拖拽效果中就已经说的很清楚了,不清楚的同学可以出门左转,查看 javascript 小实例,PC 网页里的拖拽 ,我就直接贴代码了:
CSS:
- <style>
- #drag_wrap{
- width:220px;
- height:10px;
- position:relative;
- margin:100px auto;
- }
- .dis_bg{
- width:200px;
- height:10px;
- border-radius:10px;
- background:#ccc;
- margin-left:10px;
- }
- #drag_bg{
- width:0;
- height:10px;
- border-radius:10px;
- background:#0CF;
- }
- #drag_box{
- width:20px;
- height:20px;
- border-radius:10px;
- background:#F30;
- position:absolute;
- top:-5px;
- left:0;
- cursor:move;
- }
- #drag_box span{
- width:40px;
- height:20px;
- text-align:center;
- line-height:20px;
- border:1px solid #ccc;
- position:absolute;
- top:-25px;
- left:-10px;
- color:#333;
- background:#fff;
- }
- #drag_wrap1{
- width:10px;
- height:220px;
- position:relative;
- margin:100px auto;
- }
- .dis_bg1{
- width:10px;
- height:200px;
- border-radius:10px;
- background:#ccc;
- position:absolute;
- top:10px;
- }
- #drag_bg1{
- width:10px;
- height:0;
- border-radius:10px;
- background:#0CF;
- }
- #drag_bg1{
- width:10px;
- height:0;
- border-radius:10px;
- background:#0CF;
- }
- #drag_box1{
- width:20px;
- height:20px;
- border-radius:10px;
- background:#F30;
- position:absolute;
- top:-5px;
- left:-5px;
- cursor:move;
- }
- #drag_box1 span{
- width:40px;
- height:20px;
- text-align:center;
- line-height:20px;
- border:1px solid #ccc;
- position:absolute;
- top:0;
- left:25px;
- color:#333;
- background:#fff;
- }
- </style>
html:
- <div id="drag_wrap">
- <div class="dis_bg">
- <div id="drag_bg">
- </div>
- </div>
- <div id="drag_box">
- <span>
- 0
- </span>
- </div>
- </div>
- <div id="drag_wrap1">
- <div class="dis_bg1">
- <div id="drag_bg1">
- </div>
- </div>
- <div id="drag_box1">
- <span>
- 0
- </span>
- </div>
- </div>
JavaScript:
- window.onload = function(){
- drag("drag_box","drag_wrap","drag_bg","left");
- drag("drag_box1","drag_wrap1","drag_bg1","top");
- function drag(obj,parentNode,bgObj,attr,endFn){
- var obj = document.getElementById(obj);
- var parentNode = document.getElementById(parentNode);
- var bgObj = document.getElementById(bgObj);
- var oNum = obj.getElementsByTagName('span')[0];
- obj.onmousedown = function(ev){
- var ev = ev || event;
- //非标准设置全局捕获(IE)
- if(obj.setCapture){
- obj.setCapture()
- };
- var disX = ev.clientX - this.offsetLeft,
- disY = ev.clientY - this.offsetTop;
- var oWidth = obj.offsetWidth,
- oHeight = obj.offsetHeight;
- var pWidth = parentNode.offsetWidth,
- pHeight = parentNode.offsetHeight;
- document.onmousemove = function(ev){
- var ev = ev || event;
- if(attr == "left"){ //横向
- var left = ev.clientX - disX;
- //左侧
- if(left <= 0){
- left = 0;
- }else if(left > pWidth - oWidth){//右侧
- left = pWidth - oWidth;
- };
- obj.style.left = bgObj.style.width = left + 'px';
- oNum.innerHTML = left;
- }else if(attr == "top"){ //竖向
- var top = ev.clientY - disY;
- //上面
- if(top <= 0){
- top = 0;
- }else if(top > pHeight - oHeight){//下面
- top = pHeight - oHeight;
- };
- obj.style.top = bgObj.style.height = top + 'px';
- oNum.innerHTML = top;
- };
- };
- document.onmouseup = function(ev){
- var ev = ev || event;
- document.onmousemove = document.onmouseup = null;
- endFn && endFn();
- //非标准释放全局捕获(IE)
- if(obj.releaseCapture){
- obj.releaseCapture()
- };
- };
- return false;
- };
- }
- }
参数说明:
这里给了 5 个参数,obj,parentNode,bgObj,attr,endFn,分别是:
obj:被拖拽对象
parentNode:限制被拖拽对象活动区域的对象,一般设为它的父级
bgObj:拖动时的表色背景对象
attr:2 个参数 left,top,表示是横向拖拽还是纵向拖拽
endFn:返回函数,有就执行,没有就不执行,非必填
来源: http://www.phperz.com/article/17/0407/266559.html