38_尚硅谷_h5_拖拽.wmv原创

好，我们来看我们刚才的问题啊，OK，我们刚刚是不是这个many不起作用，那想其实不是many没起作用，大家看啊，比如说。我们再把它变小一点，OK，我们来看现在我看我们的代码啊，OK index里面我们刚刚是给谁去做了面。是不是给啊，是不是，比如说我们设一个面积为600PX吧，好，其实这个面积有没有起作用，它肯定起作用，是不是来看，可是没有达到我们预期的那个效果啊，这是为什么？你看我说一下所你好面料外肯定是起起到作用吧，可是这个时候我们滚动条是不是进掉的啊，那我们先把滚动角给它放出来，怎么把滚动条给它放出来，系统的还是给它进掉。是不是我们说把外这个滚动角给他干嘛。放出来吧，那这边的o flow音还有什么应该什么凹吧，凹的时候是滚动可以放出来了，那们看到你看化是没起作用。

是不是已经已经起了作用了，是不是，可是为什么现在导导致我们这种情况，但是啊，现在我这个黄色跟绿颜色的块是称当于相当于谁来定位的。你看黄色的是谁啊？八嘛，还有个是R嘛，他们俩是不是都称作什吗CTRL来定位的，能理解吗？所以说现在我的CTRL有明外吗。有吗？没有，其实我的CR就这么大。是不是啊，那你现在两个快按照我定位是不是嘛，一个为零一个那不等为零啊，那不就在我这两边吗。是不是在哪，这个能理解。现在我问你粉红色块上面的那外有没有起作用？起作用了。懂吗？可是为什么现在黄颜色跟绿颜色的块要在我在这个位置上，因为你黄颜色这个块跟绿颜色这个块不都是参照什么。

我这个CTRL是定位的吗？我的CTRL是不是随随着我页面的缩小，它们干嘛，宽度宽度上面被缩小了，有没有讲，所以说我这个命应该给谁啊。应该给什么C吧重，大家看我这个给C重点，好来看一下，这时候再来刷，大家看现在我绿颜色块还能叠上来吗？叠不上来了吧，你看变小一点。你看是不是到我差不多600的时候就出现滚动条了，你看这个时候再拖回来，可是我们这个视频是干嘛少了一些是不是，那怎么办。其实在我们这边做设置的时候，干嘛，我们说干嘛衣什么对他也到600万，因为你这个思口干嘛，你思口的这个宽度干嘛大于等于600的十候干嘛，我才让你去做这些操作呗，一旦小于等于600，我我也不让你动了，来看遮点，我再来刷一下遮点。

就你看我们拖堂。等会我慢慢小于620个，你看其实我的视频也不动是吧，这边时候再来拉，是不是就说好的了，这个里面讲啊，刚才的那可是是因为什么，是因为这个什么包含块搞错了吗？是不是我们说这个什么面积外应该设置在包含块上吗？包含块是谁啊。CTRL吗？你不能设置什么。不能是在他是什么，是在他身上，你们俩又不是参他来定位，你这个八是跟这个什么，是不是参这个什么CTRLCTRL的定位的么。能理解吗？OK，那注意，那我们继续好，大家看那现在我们做到哪一步了，现在我是不是这东西不能拖啊是吧，而且总感觉这个东西怎么那么矮啊。啊不矮，是不是有个滚动条，上下有个滚动条是不是OK，上下这个滚动条能不能进掉呢？那这样吧。

我这个就是O杠，什么X为O吧是吧，O-Y为。刷一下只点水平上面是不是有滚动条的，哎往下说，你看这上面是不是有滚动条的，是不是垂直上是不是有滚动条的是吧，是只有你是吧？OK，这时候没有出现滚动条嘛，是吧？OK，然后看，然后我们要拖这个快的时候你干嘛。要动吧是吧，OK，那我拿段GGS行了，好，这段JS你们之前有没有做过拖拽。肯定做过砖。来看一下这个代码能不能看到。收不收？

放大镜，这不是我们之前用过吗？就用来做拖拽的吗？是不是，你们有没有做过一个什么小方块，在这个里面拖来拖去的。是不是因为你是一样的嘛，大家干嘛，比如说啊，我现在干嘛，我现在给大家去用起来，大家先看一下啊，OK，比如说干嘛我通过JS先把这个库给它引进来啊CPD是吧？OK。C I pd是吧，好，Src干嘛？JS底下的加个点JSOK，大家看我这里面干什么，我是不是给window对象这个II1讲过吧。自调用函数嘛，我传了一个参数嘛，Window嘛，那这个这个W不就是window嘛，我给这个window上面去把那个数据叫做多吗？这个多是一个对象嘛，我在给这个对象上面去绑了一个属性叫做抓子嘛，那这个脚本定的是一个方法嘛，是吧？那我在页面当中怎么调？

怎么叫，不就是他点什么？是吧，这个方法吗？我不就可以掉了吗。啊，到了。我就可以掉了吗？这跟我们几块是不是差不多啊，OK，然后怎么要他要我传什么传一个传一个回调函数吧，是吧，OK，我们来看怎么传。首先我们来看，比如说我们先干嘛，先去拿一个元素吧，我拿这个。那谁呀？待会儿谁要去动啊？音的嘛，是吧，把这个音给他拿到，等于什么都点Q到这个音。OK，怎么办？怎么找这音呢？Wep底下的CTRLCTRL底下有什么。

CTRL加这个。点了是吗。外底下的什么点音了，是不是OK，找到它好，找到这怎么办？来我把这个音干嘛，CTRLC往里一传，大家看一下。这里。F12，看你不错。来，我刷一下，只有你拖不动他吧，是吧？为什么拖不动他？Select，看有没有找错CTRL底下的什么web吧，先找web web是个ID ctrl class底下的，底下的外底下的这个阴应该没问题吧？OK，找到这个节点之后们看这边没问题。

CTRL是吧，然后呢，把这个音呢传进去。好。银也引进来了，J也引进来了，船进来。OK，没问题，我看一下刷一下，看一下能不能拖。不让拖吧。是吧，OK，我们打个端点看一下。那里第1BG第八个第B加第八个OK，来周年。刷一下，哎，是不是已经进来了是吧？OK，这个端点给它过去，OK，然后呢，我在拖的时候。是没有进来。啊，应该不依然对的啊，因为我传进来是不是一个节点，应该给他把那个欧姆斯当时间码，那这个时候应该进来C刷一下上了不动走，你是不是进来了。

OK，进来之后为什么？看哪边有问题啊。没问题啊，是吧，可是他为什么没有动啊？拖一下。真没动。啊，真没有动，来看一下什么鬼。我这个阴呢，来看一下，我这个阴呢，现在有没有定位，好像没有是吧，我这个阴呢，应该称到谁的定位。应呢，应该承受这个外派的地位是吧？那你的position应该用什么？二八输入法周一看一下，现在应该没问题了。教你。好刷一下大家看哎是不是动了，你看我拖是不是动了是吧，而且是不是只在这个什么盒子里面动啊，啊这个是为什么。怎么实现呢？大家看我现在是不是拿到这个什么。白色的小块是不是直接传到这个函里了，这个函数现在我能不能掉。

你也能进来吗？你看我的一个写法。自调用函数相当于这相当于这边的代码干嘛，Ctrl a ctrl c直接干嘛。贴了过来嘛，是不是贴了过来之后，大家看我是不是往window对象上面去绑了一个什么。绑云端上面去绑一个多的对象，相当于我现在页面上面能不能直接调这个多的对象。可以吧，然后这个多的对象式让我去把一个这个方法吧，你看我这边是不是就有一个这样个方法，然后说是不是传的第一个参数啊，我们说假va调里面的函数的话，形参可以跟实参列表不一样吧，咱们现在是不是只传了一个参数啊，这个我们说时参数干嘛只有一个啊，可是你行参有两个方法还是可以被调用的吧？哎，调用时我做了什么？这个test是不是就是我们现在这个。你了，你看我上来定什么一个的，上来是不定了两个属性，看我说每次点到你这个时候我干什么事情。

Element point.xy等于z element.y等于Z这个什么意思啊，拿什么？拿到你元素一开始的位置，也就什么意思，我上来我点上去的时候就拿到你小白块现在的位置懂不懂然怎办？看我又拿了一个什么stop对吧？你看首先这个stop是等于e.X等于E点吧，鼠标距离是口的位置是不是OK，然后每次目的时候干嘛，我再拿一个位置，鼠标距离是口的位置，他们俩一剪是不是拿到我鼠标位置移动的位置。鼠标每次移动的位置加上你元素一开始的位置，那不就是你移动后元素的位置吗？那么讲，然后再对这个元素的位置进行一次控制吗？这个你们有没有讲过。这个没讲过吗？大家看，我问你，现在我能动是不是，我是个什么样的模型啊？

我是不是这样的，首先上来我外面有一层。是不在七次上来，我是不是有一个小白块。是不是在这边啊，现在我去拖他的时候，他能动我是怎么做的，问你啊，我能不能拿到蓝颜色这块一开始的位置。难道他一开始的位置吗？一开始的位置加上我鼠标移动的距离，那不就等于它移动后的位置。那我是不是去加上鼠标，鼠标什么移动的距离是不是就可以了。是不是啊，那这个这个大point是不是代表你蓝颜色块应该是违章，你看我这个组件里面我怎么写的。你看首先上来等于X等于X，我就等于个小白块一开始的位置。OK stop point就等于鼠标一开始的位置，Most到的时候我先确定一下，就在我点上去的时候，哎，我的point的X等于小白块穿着于什么？

你这个白银是这个快啊。大看你这个快是不是永远参照我这个蓝色区域去定位的，你说其实我在点上去的时候，你这个高。零零吗？是不是OK，那我问你现在比如说我的是不在这边。当然，这是我的思考。是不是，我说我又拿到什么XY等于XY吧，是不是啊，不XY吧，问你，我点上去。我是不是你要拖的话，我得点到白色昆仑票，那我问你这个值。是不是就是我的一个steps。不。这个能不能理解，那问你以后我要我以后是不是得去拖啊，那我每次拖的时候不就把这个什么红颜色的快往后拖吗？是吧，往后拖干嘛，每次在欧欧式目的时候，我再去拿到你鼠标的位置。

比如说你现在把鼠，你现在鼠标位置在这边是不是啊，我你现在我去拿到这个鼠标位置。那我就要问大家。OK，你这个位置啊，这个位置啊。减去这个位置的是不是就是应该你这个红叶这块走的位置。是不是，那你想想吧，我在每次摸的时候，你看我是不是找到你当时鼠标的位置啊，减去一开始你它摸当的时候一个位置啊，这个问题是不是鼠标鼠标移动的距离。每一次鼠标移动距啊。这不是我每次滑的时候鼠标移动的距离吗？是不是这个代表什么。你点上去的时候，一开始元素在哪。是吧，这个你看你一开始元素的位置，加上你鼠标移动的距离，这个left跟T不就是你的吗。元素最终要确认那个位置吗？我把这个left跟这个T干嘛，我给你这个元素不就行了。

能理解我意思吗？这东西应该之前写过。应该写过，你们做这个快递时候没有写过吗？怎么拖的。不然你们。这个没写过。OK，那我们把这个库我们稍微写一写好吧，好，那这里，那我把这个库写一写。好，怎么写呢？我们就不一行行写了。OK，嗯，这里把这个干掉好干掉。OK。全部盖掉。什么概念？好，来看一下。好，这个模板有没有见过？这个模板没见过，开斯的时候，斯的时候时候把它掉，这没见过，这是我们托在最最基本的模板吗？这个会不会，这个没问题是吧，OK，我们来看一下，好，那我问你。

呃，我text是不是我待会要传进来的谁？白颜色这个款。是不是啊，那我做，那我那我上来做件事情，那我上来做一件什么事情，你看这边不是我往这个白色方向去点点的时候嘛，是不是我说么，我来在外面干嘛，你说在这边好，我点上去的时候干嘛，首先我在外面我去挖两个东西，第一个我画一个ST star换下，好等一个对象XY0 Y为零，我现在初始化一个对象嘛，好，这个对象我要干嘛，我用它来模拟。啊，我抽象什么抽象元素一开始的位置，这个行不行，这可不可以啊，好再来干嘛，我说再来一个好抽象什么鼠标一开始的置，OK，我什么E换。

Pointin，那你point等于什么？X0和Y0。这个位啊，OK，然后我点上去的时候，我点到这个白颜色宽的时候，是不是我说把你这个两个位置是不是该确定一下，OK，大的点X应该等于什么。等于你元素一开始的位置吗？弄点什么弄点什么好问你现在我拿到这两个值是是什么值。你看是不是我比如说你干嘛，我现在拖到一半了。

嗯，现在不能拖是不是啊，拖这个我拖到一半了是不是问你比如说我现在再去点上去啊，你看这是我刚刚是不是拖了一次啊，那我现在拖第二次吗？问你我再上去拖的时候我点上去。我这个star X跟Y应该是谁？point.x point.y应该是谁啊？这个是不是就是我大分你的X没有Y嘛，Y上面我没有动嘛，咱们现在只考虑X轴是吧，这个时候X啊，那问你具体你待会要走多远啊。走你我拖这么远，OK，我听比如说我刚刚从这边是拖到这里，问你现在我拿到了这个吗，这段。是不是你最终的位置是不是要跑到这边了，那我拿这个当X，加上你鼠标移动的距离不就可以了吗？

是不是OK，那我怎么做，现在我们把这个X我们当的时候，是不是已经。拿到了，问你在欧上的时候要不要去拿一下鼠标现在位置。要要待会要剪的是吧，那怎么办？按的吗？这代表鼠标一开始为什么OK，他点X吗。不是有个E吗？E点什么CCX还有呢。E点可能是不是这是不是拿到鼠标一开始距离口的位置。呃，也就是说你在这边拖，我问你，你的大X拿的是不是这边。是不是你的X拿是哪边的到石口的，然后你待会拖拖拖你拖到这边来，我再去拿你X，怎么这个白颜色快到石口的，他们俩一减是不是就就是我要拿的这单裙。

是吧，你把这段距离加上这段距离是不是你这个元素最重要取哪个位置？是吧，那不就简单了嘛，你看现在我一开始是不已经经拿，是不是已经拿到了，那你看欧莫斯木的时候，我应该去哪里么？是不是鼠标在你欧斯时候的位置啊，就比如说我挖一个是吧是吧，照样的一个对象X0，什么Y1为零。这个味啊，OK，我们说个嘛。你point.x应该等于什么？e.X no.Y等于e.Y是不是现在需要一个差值啊是吧，而且每次在欧莫斯时候，你这个快速得走啊，那干嘛，他是什么？

点什么掉点left么？这个应该等于什么？对，你元素一开始的位置加上什么。加上你鼠标现在的位置，减去你鼠标一开始的位置。再加是不是就可以了，这时候是不是就可以动了，我们来看一下这里。我来刷下看看。你是不是就可以动了，哎，可你发现我是点到这边来看一下，看一下有没有问题啊。你看我每次斯到时候上来的时候，你看他是不是就跑了。跑了吧，这个为什么跑了。我是不是上来还没动他就跑了，你看上来我还没动，是不是他就跑了，说明我们这边的值有问题吗？看看哪边只有问题。

点X每次点上去，刚点上去他就跑了吧。Eb.CX减去大点。哎，不对，我应该解释什么。增应该减什么an，再减X吧，是不是我们说元素一开始的位置加上你鼠标移动的距离嘛，这才是你鼠标一开始的位置吧，这是你鼠标移动的距离，是不是应该减什么an point X8这个你看一下。说下。你看这是不是就好了，可是问题这是会超出吧是吧，为什么为什么会超出啊，你没有做控制嘛，对他们俩是吧，我们说干嘛那这样干嘛，我说我挖一个等于什么我大线这不就是你最去。

最终去的那个是吗？OK，我把这个两回干嘛给你。领过来是不，我们对这个做做一些控制吗？想想如果你这个left跑到后面去，说明这个小赢了。是不干嘛，我说嘛。这不就叫什么范围的一个控制吗？If什么？L干嘛这个应该写在下面，写在这个L下面嘛，是不是如果L干嘛小于零，这个L应该干嘛等于零，这种这种这种事情没做过肯定做过是吧？LC呢LC什么L干嘛大于什么，大于哪边啊大于这个指标。是吧？大于什么？大于这段距离吧。是不是这张今天是不是粉颜色的宽度减去白颜色的宽度是吧，怎么算？

还要带什么？粉颜色的宽度是谁啊？粉色的看就谁啊，不就是你这个老爸吗？是吧，他点什么点。嘛。是不是减去什么，你自己吗？Of什么吗？这这段距离不就是你能跑的一个最最大的距离吗？如果这个L要大于这距离怎么办？就等于这条基调。是就可了。那一个凸出来不就出来了，那一个凸出不就出来了吗？这里我来说一下，来看这里对。是不是哪边错。

加什么PX吧，哦，不对，PX是不是加在这了。点current减去text里的off吧。总感觉哪边有问题啊。就是那个。哪边号有问题，27行啊，这边是不是干嘛多了点东西啊，这一大看是不是就好了。是不是就可以了，这个能讲，然后他想每次拖的时候是不是应该有一个什么。粉色的块出来吗？我每次做的时候不就有一个粉色的块出来吗？是不是这个怎么装。是不是在我每次思木的时候干嘛，你走了多少，我就把这个值给我什么外的一个宽度。带上我的外二，我现在是不是只写了外的样式啊？我们说外二怎么办？

点外方什么二是吧，你看我的结构里面，大家看我这个外壳跟我的啊，不是叫Y叫什么迪pink吧们说什么这个。来这里这个d pink好问你这个DPI要不要定位起来。他们俩在叠在一块的嘛，它肯定一样，什么配性，为什么不十路吧，Y乘应该为多少上来。是不是应该为零一，你一开始上来你能看到身份的吗？没有吧，每次做的时候是不是慢慢的去调整它的外表，是不是，那怎么办？首先他的你该不到。上来干嘛干嘛。给他一个白光了，为什么第一吗？是吧，默认这个跟上来给多给不就行吗？是的啊，OK，我们说你看，如果你这个东西为百分百，大家看如果你为百分百。

有没有，好像没有高度吧，是吧，它的高度应该干嘛一样吧，3P吧，是吧，马跟他也应该是一样的吧。来看一下周，你看你给百分百是不是就在这边一开始玩这个Y多。不礼貌。是不是每次做的时候干嘛。让它慢慢出来嘛，是吧，怎么怎么每次做的时候，每次做的是让他慢慢出来。是不是在我这边要去做做一些操作了。这是不是代表代表我欧姆斯的什么？是吧，那怎么办，大家看我这边是不是传了一个回调，OK，比如说干嘛，我每次在欧魔的最后干嘛，如果你这个卡。

存在，并且你派克里面有一个属性叫做。Move。这个我能不能这么想，有个属性叫做木行不行，而且你这个木如果是一个方形，怎么判断它是不是一个方向tap of你这个东西如果等等于是一个，三等是一个。Fun方形是吧，那我就把你干嘛在我这边调用。可不可以啊，可不可以啊，那我在外面我能不能传，我传一个什么。什么这个上应该传一个什么。函数吗？是传统还是么？传的对象啊。这是个对象，你对象里面要有一个目吧，你这个对象里面这个目，这个属性应该是个函数吧，我才能这边给你去做一个调用吧，那不讲那怎么办，我忘什么。

等于一个对象，对象要有个木属性，木属性是一个方形里，比如说我在这边去点什么move来看一下这里来看我。我每次在拖的时候，他肯定会给我打出沫来。是不是我每次在拖的时候，在这个什么这个回调函数就会被执行啊，咱们现在干些什么事情啊，我们是不是把部分业务逻辑从这个组件里面抽了出来。抽到了我们这个什么页面上来写了。这个组件是不是比较干净的。能讲我这个组件里，我这个组件里面有去是不是只是定义什么接口。也就是说我把我组件里面这个欧姆斯木状态暴露了出去，暴露到哪边去了。

暴露的这个回调函数的。回调啊，暴露这个对象，这个目的回调函数上去。每次我在拖的时候，最终来执行这个函数。那是不是如果在每次做的时候要去写一些逻辑的话，我直接可以写到这。这叫回调机制，我问你，我现在写的这个目像不像一个事件？这个事件什么时候出发？当我在拖这个白颜色块的时候出发，那这是不是一个回调函数？是不是啊，只不过我帮你们去实现这个回调函数诶。有没讲，之前的回调函数都是刘雅琪已经在帮你做。懂吗？那我问你这在这个里面我应该干嘛。我是不是得找到外找到那个什么电瓶的，OK，你找到这个什么。

Pink，好，应该是这样。是不是底下什么点OK，我找到这个干嘛让他的什么，他点掉点应该等于什么。是不是等于你这个白颜色的快实时的平移啊。等于它是什么？是不是等于A白色块是么？是什么点什么。加是不是就可以了。是不是可以了，我们看一下说一下。数据出来了，这个能不能理解好，一般做的再好一点，我说这个里面，我这个一拿下变成this行不行啊。行不行？认识是谁怎么办？这个认识是谁？看这个木在哪边被调用的吧，木在哪边调了。

这边掉了吗？认识谁啊，这时候认识这酷派啊。那怎么办？这不是一个函数吗？点括括不是可以改这个历史指向吗？改成谁？Test。Note，这能不能看到现在问你这里面这个例子是谁啊？我传我传给谁，那我能用可以了吧。是不是就可以了。看下。是不是就可以了？OK，如果这个东西现在听不懂，没没关系，可是你要知道，我们以后写的代码要比这种模式要难N倍。啊，就是最简单的，我们什么以后写的一种常用的一种编编码的模式，你们先去接触接触它，看能不能看懂啊，至于这个this的指向，以后我会帮你们细讲，我们会帮你们去分辨为的讲，哎，这个Z什么时候指向谁，什么时候指向谁啊，你这种回掉的机制，以后我们还会去用。

能理解，而且咱们现在封装这个库还比较小呢，我说上财什么只有多少？好吧，记不记得我们上次给你们看过那个裤有多好？1000多行了吧，能理解吗？所以说你暂时先要把这个库给他看懂懂吗？啊，而且我觉得这些代码应该是比较熟的代码。能不能理讲啊，这之前肯定讲过拖拽了吗？讲过拖拽的话，这些代码应该比较熟呢，每行代码什么意思，把它把它搞搞懂啊，OK，大想那现在我就干嘛，这里面这个就可以指这个吗了。能不能理解，OK，大家看。那我是不是整个东西我就做完了。是不是出是不就完了。

怎么讲，只不过拖的时候视频还不能动吗？是不是啊，OK整理，那我们把其他部局也做。