js组件的基本写法和div拖动的逻辑就不再赘述了，前面文章已经说过了，可点击下面链接查看

js实现div可拖动

js组件的基本写法

html5divjs自由拖动js组件可拖动的div React

在这里紧张剖析下怎么限定拖动的范围,先看下图：

限定范围

拖动时有四种边缘情形，即图中的1、2、3、4，我们逐一来看

当div拖动到位置1时，我你们再往左拖动，都该当失落效，即拖动div的left 始终即是外层div的left值当div拖动到位置2时，我们再往上拖动，都该当无效，即拖动div的top始终即是外层div的top值当div拖动到位置3时，我们再往右拖动，都该当无效，即拖动div的left始终即是外层div的left加上外层div的宽度，然后再减去拖动div的宽度当div拖动到位置4时，我们再往下拖动，都该当无效，即拖动div的top始终即是外层div的top加上外层div的高度然后减去拖动div的高度

理论知识弄明白了，我们先看下实现的效果吧

有范围的拖动

下面贴上实现的代码

html中引入组件，并初始化

html中引入组件

详细的js组件实现

js拖动组件1

js拖动组件2