使用边界偏移实现图片拖拽位移（DOM操作），其他操作的想象空间也很大

可以绘制图片，也可以合成图片，这是的优点。但缺点也很明显：它没有DOM的概念，其中的图片元素不能像那般容易被选中和操作。参考阅读：canvas图片实现拖拽的思路和解决方法

实际上，和也可以实现图片的拖拽移动，其本质是改变图片在页面上的定位，使其脱离文档流，这是所具备的能力。这就是本文标题所说的边界偏移。

思路

和canvas实现图片拖拽的思路是一样的：鼠标移动时，将移动的偏移量计算出来，并将偏移量设置为元素的和即可实现图片的拖拽。

计算偏移量的参照物

按照上面的思路，找好计算偏移的参照物即可，在当前的情景下，鼠标就是最好的参照物，鼠标事件中有好几个坐标系可共使用，使用坐标值最佳。它表示鼠标距离浏览器内容区域左边界和上边界的距离，每次移动鼠标时这个值都会改变，想获取每次移动鼠标所产生的偏移使用接口即可，一图胜千言。

代码实现

十分重要的前提：这里操作都是，要想实现移动，那么该标签需要使用定位，让其脱离文档流从而实现移动，使用绝对定位还是相对定位，还是有讲究的：1、如果上一级元素有那么使用何种定位都没问题；2、如果上一级元素无，那么必须使用绝对定位。

代码中有两个地方需要说明

1、和有什么关系？

是的另外一种形式，前者返回的是整数类型，只读；后面返回的是带的字符串，可读写。这两个接口都是用来操作定位中的样式的，对应的则是样式。

2、看代码：为什么要加上一个的值

看截图，m1.style.left是赋值行为，initLeft是鼠标左键首次按下时所保存到图片元素的值，在示例中的样式中，可以明显看到，设置了的值。

假设，第一次x轴y轴均偏移了，将这个偏移分别设置为和时会发生什么事？那就是图片根本不动，因为赋值操作会覆盖原来就有点。

所以，要加上初始的和值，如果初始值都为，那也不会有任何影响。

通过DOM操作图片的优点

可以实现点击元素时，弹出对应的控件，如旋转图片、裁剪图片及替换图片等，可以拖拽文本，为文本更改样式、字号等，最后使用合成图片，当然，这是后话了。