之前文章中也讲了一下拖拽的基本思想，理论是有了，那实践呢，可以运用到什么地方呢？下面就给大家带来一个用拖拽思想写的一个小实例，供大家参考，大致效果看下图：
就是这样一个简单的一个拖拽条，你可以把它理解为滚动条，也可以理解为表单中的数量选择控件，也可以理解为进度条，等等，反正你可以改成很多你想要的效果，废话不多说，我们来看看这个是怎么做的吧！
想了想，感觉原理就不用说了吧，我在拖拽效果中就已经说的很清楚了，不清楚的同学可以出门左转，查看 javascript小实例，pc网页里的拖拽 ，我就直接贴代码了：
css：

html：
0
0

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 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 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：返回函数，有就执行，没有就不执行，非必填
以上就是本文的全部内容，希望对大家的学习有所帮助。