119.尚硅谷_JS基础_拖拽（二）

咱们来看咱们上午做这个练习，上午咱们是做这么一个拖拽这个练习是吧？呃，拖拽练习，但我们说这有一个问题，现在的问题就是我们现在这个鼠标指针，它一直是跟这个元素的什么呀，左上角重叠，而我们希望什么效果呀，我点哪是不是在在哪啊，诶点哪在哪啊，那咱们为了演示这个问题呢，我们来画一个，诶画一个简单的图来说明一下，那这里边呢，首先我们来画一个东西来表示我们这个div，诶假设呢，它呢，就是我们这个div红色div对吧，那现在我们要对这个div进行一个拖拽啊，进行拽，咱们来一个这个还是来一个空心的，空心来一个这个红色。这么一个div，那现在呢，我要对这个div进行拖拽，那这块我刚开始拖拽的时候，我肯定要点我这个div的某一个位置，对吧？哎，某一个位置，假设呢，我点的是div的这个这块位置。这这颜色呢不太好，来一个这个蓝色，假设呢，我点的是这块位置。

那我希望什么呢？在我拖拽的过程当中，假设呢，我把这个div给拖哪去了，给拖到。拖这来了，那我希望我这蓝点干嘛呀，它是不是还在这个位置啊，哎，这蓝点就表示我这个鼠标指针，哎，就是说我希望什么呀，鼠标指针和我们这个div它们的这个相对位置是不是保持不变呀？哎，那注意了，这个是我们期望的结果，但是实际结果什么样。哎，实际结果是。是不是这样的呀，哎，或者在这儿来说，咱们这来比较一下，我这来画一个再画一个方块实际结果什么样的，来一个这个蓝色的实际结果它可能是。是不是这样的呀，还有红色的是我们期望的一个结果，而蓝色的呢，是一个什么呀，实际的一个结果，所以我希望干嘛呢？我希望把这个，把这个实际结果是不是调整成上面这样，哎，那这块问题来了，那怎么去咋整啊。

咋整啊，现在我们想想，我要想调整这个位置，无非是两种方案，咱们现下来这样吧，我来把这个整个画一个大框，画一个大框来表示我们这个整个一个网页，画一个大框整个来表示网页，现在呢，我希望的是什么呀？我希望的是红色这种实际情况是蓝色的，对吧？那现在无非就是两张哪两张啊，要不然你把鼠标给它干嘛呀。挪这来对吧，要不然你就把这个div挪上边来，你只能两种方案是吧，要不动鼠标，要么动div，那现在我们来说动谁呀，动鼠标行不行？首先说鼠标咱们控制不了，鼠标谁控制的，用户控制的吧？诶鼠标是只能是用户控制的，我们控制不了，那即使说你说老师我这个权限高，我就能控制鼠标，你要不要控制啊？诶这块会很诡异，怎么很诡异呢？你咔往下拖，刚拖到这儿，你咔把鼠标给它调这儿来了，是不吓了一跳啊，哎咔给调这感觉，这个一窜一窜的这种感觉是吧？所以注意鼠标我们是不能动的，鼠标指这指针只能是谁呀，用户控制，而我们所能控制只是谁呀，这个元素的位置啊元素位置，所以呢，这块来看，那我就意味着什么呀，我是要把这个元素。

调整到。这个位置啊，哎，那同理这个元素是不是也要调整到这个位置啊，哎，都要挪动到这么一个这个距离，那挪动多少啊，我是不是向上挪这么挪向左。挪这么多呀，诶，那我要向上挪，怎么挪，我是不是要改它那个top值啊，我把这段距离从那个top值里给它减去是不是行了呀？那这一块我干嘛呀，我从这个left值里边给它减去是不是就行了呀？所以干嘛呢？所以我调整它的位置，就是在修改我们这个元素，这个top值还有left值，将这段距离从它这个心值里边给它刨出去是不是行了呀？刨出去它是跑这来跑跑这个位置来，诶那问题又来了，这段距离是。

是多少啊，这段距离是多少？哎，那我们来看一下啊，这段距离是多少啊，那我们先看这个是不是我们这个鼠标啊，哎，鼠标我们有一个叫做一个可LAN，一个X，可LANX是我们鼠标的这个水平偏移量吧，那哪段距离是X？是不是这段距离啊，诶这段距离叫做一个可LANX，那我们说了还有一个距离，还有一个谁啊，还有一个我们元素，我们的元素它是不是有一个offset left呀，它左侧的一个偏移量吧，诶左侧偏移量应该是哪段呢？是不是从这个它左边到这个左边一个距离啊，这是不是它的一个offet left的呀？诶，那我们来看现在我有一个可LANX，还有一个offet left，那我干嘛呢？我用这可X减去offet left，剩下的是不是就是点距离啊，哎，那我只需要把这个东西整个往左是不是挪这么多，也就是说把这段距离从这个left里边给它剪出去是不是行，哎，剪出就行，同理，那我们看上边，上边一个什么呢？上边我们还是来看这上边我们说了有一个叫做什么呀，叫做一个可烂的鼠标的，有一个叫可烂的。

Y啦，是不是这距离啊，然后元素呢，它有一个叫做是不是opposite outside top呀，哎，我用可兰Y减去opposite outside top是不是正好是这段距离啊，哎，所以接下来的工作我就要干嘛呀，求出这两段是不是距离啊哎，两段距离我们来看怎么求，直接来写一下啊，那这块我们先来看第一个问题，那这东西我要咱们先说一下啊，我们要求出这个偏移量，哎，求出我们这个div的一个偏移量，Div的这个偏移量我要怎么求呢？直接就来什么呀，我们叫做一个鼠标的一个鼠标点一个这个，可LAX我们这个水平方向减去什么呢？减去我们这个元素点一个off set left，是不是这个会有一个结果呀？诶这个那结果是不是就是我们这个水平方向这个值啊，垂直方向呢，垂直方向我们来说其实也是一样的。

叫什么呀？鼠标点一个可兰Y减去一个offset top是不是就求出来了？那我先这个公式咱们找着了，怎么求咱们也知道了，咱们第一个问题咱们去哪求？跟哪求，我这里边有这么多响应函数呢，有一个on down，有一个on move，还有一个这个on up，有这么多响应函数呢，在哪求？首先on up肯定不行了，对吧？你现在要考虑的就是on down，还有on move on move的时候求行不行呢？

也行，它也行，但是好不好我们来看啊，也就是说我这段距离它是什么时候定的，我点的时候这段距离是不是就已经定了呀，我整个拖拽的过程当中，这段距离它变不变呀，不变，我拖拽过程中这个距离就已经定了，所以我点的那一刻，这个距离是不是就应该求出来了，所以这块最好是在哪求啊，是不是在点的时候求啊，也就是我们这个on mouse啊，当吧，哎，所以在这儿啊，在我们这个on mouse down里边求啊，就是求一次就行了，而你要设置到on mouse木里边嘛，你是不是移动一下求一次，移动一下求一次也比较性能比较差啊，性能比较差，好，那既然要求了，我这是不是需要定义一个这个事件对象啊，哎，来一个这个，哎疑问evt，然后呢，解决建容性问题，Event等于一个这个event或者一个window.event那现在我们会发现我这就有两个事件对象了，那我问你了，这个对象和这个对象它一不一样。

一不一样不一样吧，诶它是它外边的这个范围是不是更大一些啊，它是在里边的啊里边的这是我们这个on Mo down的事件对象，而这个是我们这个on Mo move啊范围不一样啊，范围不一样，好那我们来求一下吧，直接挖一个我们叫做一个，诶叫做一个OL opposite left等于什么呢？鼠标坐标叫做一个invent，点一个可LANX减去一个什么呀，Box1.1个opposite，一个left，然后下边再来一个Y，一个这个OT，我们这个opposite top等于什么呢？等于一个event，点一个这个plant y减去一个box 1.1个offet，一个top，这是不是得出这数了，诶然后干嘛呢？然后我把这个是不是从他这个top还有这个left里给它减出去啊，哎，减出去直接来一个left，减去一个OL，然后呢，这来一个top减去一个OT，这是不是就OK了呀？诶这个是一个OT，我一保存咱们来看效果，这一刷新咱们看看行不行啊我这一点。

是不是就行了呀，来我点右上角。是也行了，点右下角。是不是没事啊，诶点左下角是不是都OK了呀，诶点中间这一块是不是也就没问题了呀，诶这一块就OK了啊，现在你怎么拖它和它的这个相对位置就都不变了啊，就都不变了，其实这个东西呢，它并不难，关键是干嘛呀，你得把这个图你给它分析过来，我们要求的就是什么呀，是不是就是这一段距离啊，这段距离一求你给它刨了就完事了啊，再剪出去就完事了啊好，那这个呢，是我们说的一个鼠标的这个位置，我们就给它整完了，我们这呢先停一下啊，先停一下。