本经验讲述原生JavaScript实现网页元素拖拽的方法，以及拖拽的进阶内容。
工具/原料
已安装Dreamweaver或其它网页编辑器的电脑一台
基本代码
HTML和CSS代码自己添加一下。JavaScript代码如下：END
拖拽代码封装与调用
END
拖拽进阶之带虚框
1
在网页中可以实现带虚框的拖拽，效果如图所示。
2
JavaScript代码：END
拖拽进阶之改变大小
1
拖动元素右下角可以改变元素的大小，右下角是一个很小的图片。
2
JavaScript代码：END
拖拽进阶之碰撞检测
1
如图，红色块没碰黄色块之前，不变色。碰之后，黄色块变色了。
2
JavaScript代码：END
拖拽进阶之边界吸附
实现块拖拽时接近文档边界自动吸附，JavaScript代码：END
拖拽进阶之限制范围
实现块只能在固定区域拖动，无法拖出文档。JavaScript代码：END
注意事项
JavaScript代码的书写
上一篇：如何开启或关闭WPS画报功能
下一篇：怎么样寻找好的创业项目