42_尚硅谷_h5_拖拽封装.wmv原创

大家看我们这个图片，我说到哪。啊，反正已经说了这个拓展了，那我就把它输出群了。嗯，知道在哪写呢。我写到哪第11里面吧，是吧，写了个做掉吧，咱们现在是做到了磁性吸附啊，其实它还有一个叫九宫格检测碰撞啊，碰撞检测我们来看一下叫碰撞检测。啊，你会发现是不是逼格都特别高，碰撞检测啊，因为别人也会这么问。第一次我听到磁性吸附的概念，真的把我吓死，我这还能吸上去，后来一看，我的天，好，那这个时候去搞两张图吧。嗯，图的话我们应该有好多是不是。我记得我图这里面有一张图，是不是你这张图你过来啊，我要搞两张图。啊，还差一张是不是之前应该我们也玩过一张吧。是先先先。

那现在他们俩发生点碰撞。边框背景里面应该有一张，哎，不对，诶，同高去哪了啊？马赛克马赛克马赛克马赛克在哪做的开马在做下述操作的时候。对，就是它CTRLC，好好让这两个大佬在在一起玩玩，CTRL1OK。同高是吧，OK来看好现在比如说我们之前做的是不是一个元素啊，我不做元素了，我做图片行不行，一样的吧，我做一个一麦吧，是吧，比如说S什么。键底下的什么。小当年天气嘛，是吧，OK一样的嘛，给个ID叫什么test嘛，因为我上面不是写的一样什么是吧，周你那是不是现在就在拖。

是不是要做大，怎么变形了，那他这个脸露出来好走你好上来下是不是这样的啊，OK，那我再搞再搞一张图片。啊src麦体交是什么？嗯，同钢点偏是不是OK，这个ID的话，一个叫test，一个ID障碍物怎么评衡。障碍物，这不叫太斯，那想的名字叫同高吧，啊，障碍物，障碍家族这样OK，来看一下，呃，这类行为看吧。思路上是不是啊，嗯，外看也稍微指定这里嘛，也也就说也是200啊看也是200 PS是吧，这里嗯看它在哪。

是不在这怎么他便宜一点，那为两百四百吧，600吧，嗯，拓有为拓400万，OK找你。对，是不是现在这不给了。OK，是不是在这，现在我嗯。你看上去，哎，拖沓是不是没有太大问题啊，现在我想拖上去之后让这张图片坏掉。可不可以，比如这样啊，我这么玩啊，这个图片我就搞一张啊，这个还是给你什么d test是不是走，你现在玩这个快拖上去的时候，我要把这个图片换掉。你说干嘛？我拖上去的时候，你要从同缸给我换成小刀。可不可以啊，就是我慢慢拖上去，你给我换掉怎么做是不是，我得检测他们俩有没有撞到。

是吧？怎么样检测他们俩有没有撞到？怎么样检测他们俩有没有撞到。而且我做的很多用。啊，有一种方式叫做九宫格，什么意思，首先大家看问你他是不是四条边好，这四条边的位置能不能拿到。肯定能拿到。是不是OK，问你他是不是也有四条边，是不是它四边的位置能不能达到。他是角边的位置，能不能拿到也能拿到，比如说这个叫T1B1这什么。阿姨在哪吗？L1这个叫TRBRL22这几个字做一个比较，我们是不是就可以知道他有没有读多少。是不是啊，这叫九宫和景的碰撞，那我们思路是不是有了，写一写嘛，怎么写。

所以那卡这边我们可不可以优化一下，这边是不是都是对T做的一些啊。判断，那这边能不能来个L11。LC嘛，是吧，这里。我把这个包进来行不行？一样的吧。这不一样的吗？LC，如果T大于三，我让T等于它吗？因为你这个不是都是对T进行一个判断吗？是不是上面呢，上面改成什么L是电。OK，你不是对T做个判断，那把这个判断干嘛，直接拎过来不就行吗？CTRLX切掉切进来这个要干嘛。切进来，那是不是现在就比较干净一点，是不是OK，这个我们做的什么，做的是叫什么限制范围和什么磁性吸附。

是吧，OK，那我们说这边我们还得做什么，问你碰撞检查应该在哪做，在这个上面还是下面。上面下面。碰撞检查的时候，它是不是已经动完了，应该是不在下面，是不是在这边去做什么碰撞检测，是不是，首先我们说挖一个什么T。画一个B，画一个R1画一个什么LT应该等于什么？T等于什么？T是不是等于这个，这个怎么答？怎么？是的，干嘛？怎么了谁啊？

Test no的点of是不是这不动是吗？是吧，我们说这个left现在是参照于谁的？参对快吗？是谁啊？出8万块嘛，那不是我的时口吗？能不理解？OK，整点下面这个B应该等于什么？B不就是它吗？他那什么，再加上他自己的宽度呗，啊，加上自的高度呗，他是他那什么他。阿姨呢？是这什么？不下他。加上欧S是吧，LV是不是干嘛这条边什么。

Control controlling of that。那。是不是这样，OK，那再来看啊，注意听啊，整体还得是不是干嘛再来做是吧，再做什么T2。B22L2，这应该等什么？跟这张图片有关系吧，是不是，那是不是得拿到图片这个节点。是吧，整你算等了啊，这边不是拿这个test吗？我在Y吗？Image no等于什么端点Q知carry select找到什么image是不是就可以了，因为我现在页面上只有一个image是不是OK，然后呢。把这个全部换成什么。MAG。你看T2 T2是不是等于我这个，它那不就是1IMAGE等。

全部换掉这个。是不是就可以了，这不是这八条边不就出来了吗？然后我们是不是就得嘛。得去检测他们俩有没有撞到了，怎么才算他们俩撞到，怎其实算撞到的话，其实。嗯，啊，这个我得先判断好，其实算这个撞断的话，其实。不是很好算，我们算怎么样才能没有撞到？是不是可以了，怎么样才能没有撞到当我这个阿一小于我这个。对二一小于二没有撞到。是不是OK，我说是不是在这边这一圈都算没有做到。是不是OK，那我说什么，那是不是应该应该这么写if什么。

二一干嘛小于L2是吧，因为你你你如果算他们俩撞上去的话，这个其实不好算。为什么？因为你要算什么算我这些距离是不是全部包含在里面啊，都是与的关系，特别不好算，可是我算外面就比较好算。都是或的关系嘛，是吧，首先R1小于什么爱好或者什么。你看这是不是都算这个区域，都算我R1小于啊吧，那是不是现在还有上面这个区域啊，上面这个区域代表什么。B小于什么T2，是不是我们说或者什么B小于T2。是吧，OK，一个点找到了，这个点找到了还是不这边这边什么L1是不是L1大于二二是不是或者。

L1大于二。或者。什么？这边T曰。大于零。T1什么大于？什么第二是吧，这个情况代表什么，有没有撞到，有没有撞到，应该显示哪张图，没有撞到是干嘛。啊，其实还是得换一换，因为你待会换掉。你这else里面不得换掉，你这else里面是不是要换了imagine not点的意思吧，Image底下了什么小飞皂，你面辑吧，是吧，只你你看撞上去就换掉吧，你出来干嘛换回来。

等什么点，下周你你看是不是就能检测到碰撞了。是不是啊，能理解，OK，这是我们检测碰撞的经常用的一种手法，理解吗？OK，可是现在我们把这个代码干嘛？我们说这个代码不精致，好，我们把这个代码抽一抽。好凑成一个组件啊，这个里面的抽牌的话，其实还比较简单的淋巴干嘛拖拽封装。看我们怎么封装好，大家想想，我拿到这两个节点是不是就可以了？

是吧，其他我就不想做，那怎么办？把这一个码全部CTRL来一个函数function对RL图转传进去是不是就可以了，这里然把这个东西干嘛。呃，格式填填好CTRLS啊，把它的格式弄好来看一下啊，把这些注册全部干掉。请SOK，咱们是不是就干嘛搞了一个这图了是吧？OK，可是我们说里面这些东西是不是应该缓存参数啊。太渗透的，这是我们要被拖出来那个元素啊，那你首先说什么，来一个被拖出来的节点是吧，你把所的太渗的全部换成什么。

No。OK，上面是不是不要换，全部替换，只要你哪个不能换，这个不能换，这个还是叫什么没问题，这里是不是OK，好，那你要被撞的那个呢。是不是又是一个noe是吧？OK，嗯，那把什么把imagine not全部换成什么等。全部替换。OK，你好，那这个要还是干嘛。是不是OK这里，那现在我们说干嘛大是有没有可能有时候不会传这个有点二会什么，那这边是不是就会有问题啊是吧，我们说这一段功能是应该在什么。

在你有弄的时候才能有的是吧，那怎么办福是吧。NODE2，你存在。再去进行这个操作，不然的话我不能做是吧，而且有些时候是需要碰撞警察跟磁性系部的吧，那比如说干嘛，我这边来一个磁性息部的一个值。这个只是用来做实性吸附的是吧，你。OK。把这个十统一换成来。这边换成me。是不是这个换成这个换成是不是，可是有些时候的话，我可能干嘛不需要他们吗，是不是。下次症状。

其实默默认这个values应该给多少，给零是不是，那怎么办，有时候我不需要怎么办，这边是不是这个吗。应付。肯定是得有卖才能，才能来什么执行到是不是OK，嗯。那有时候我可能连什么。有时候可能连这个范围的控制我都不想要了，是不是，那怎么办？首先这边给个波是吧，来F这个flag对吧，代表你要不要做。范围的控制，你如果连范围的控制都不想做的话，就不要谈执行去做。是不是可以什么我们说。干嘛？如果你知道吗？Flag的时候才代表什么，要去做直性吸附吧，OK，走。

默认上来这个Y值给多少零是吧，那想想那怎么办？算吧。是不是我在这边去忘一个雌性吸的一个变量，忘一个雌性吸附的一个一个flag吧，磁性吸附怎么做，吸附怎么做，西服怎么装。西怎么装？因子怎么说？一脸懵逼，你们懵逼我也懵逼啊，看我干嘛多呀媳妇。英语。鬼认识啊，我反正不认识。CTRLC，这个就作为那个因子吧，CTRLC干掉。OK，报一个因子是不是这个因子默认值，我们给多少？

孟子给明白是吧，OK，也就是说下面我是不是都用这个。英子啊，因为我不用这个标吧，我用这个啊。因子行不行？默认就离吗？是不是？如果你有白头怎么办？把值付给他吗？如果没有外了，那这个一该干嘛，是不是得出来，因为你分的时候我还是需要什么。需要这个范围的限制的吧，是不是只有你那那是不是就可以了。是不是可以了，问题我定义出来是不是一个A啊。这个你标吧，可是我们说这A篇，我们说在这边做事情的时候，我们说首先你这个noe是什么。要干嘛，拖拽元素这个其实必须要有的，不然你就不要谈拖拽了，这个呢。

碰撞元素，碰撞元素是吧呢。不带干嘛，是否是否限制范围，是不是我们说这个。美女呢，西附的吸附的是吧？吸附程度吗？是吧，那这几个值不能这么排列。是吧，我们说碰撞元素应该什么放到最后。是不是一级级上来嘛，那样讲，我们说这个东西该放到。最后。是不是这个能不能讲，首先你得有这个，这个肯定是什么最重要的，其次是什么限制范围，有了限制范围，你这个白度才有意义，是不是这个是不是算什么，不能也说有可能不传呢。

这相这相当于是个附加功能嘛，所以说JS在这个行参的设计上面也是需要需要考虑的，懂不懂，OK，那我干嘛，我们调一调呗，是吧，只要念CTRLC好吗？调用一次不就行了吗？是吧，怎调看它no干嘛？我需要实现信部是吧？OK，所以考一会。好麦这个字是干嘛的？Value是吸附的程度，这个程度是不是传一个什么数值啊是吧，就我感觉我这个API定义的还是有点。不是好通用啊，师傅这个来必须要穿，不可能的嘛，我默认。

说明传一个参数是什么，只是拖拽，而且这个，而且这个拖拽干嘛是啊限制范围的，没有资金吸附吗？那我这个flag是不是给个默认值。你这边都是按照这个这个什么回来看来控制的嘛，是吧，那我上来先画一个什么，画一个啊，我们说限制范围怎么说。我要给默认值限制。

看一下里面那条。OK，上来玩，还有什么呗，是吧，那也就什么。要不要这个改的吗。这改什么你什么是吧，因为上来的嘛，肯定会来执行编码，如果你传付应该怎么办。传货怎么办？也就什么在这边这样做判断吗？If，什么if，你有flag，你存在flag吧，那我就应该把这个立边体，这干嘛置为这个flag，是不是就可以了。是不是这样的，能理解吗？OK，来看一下，比如说这个时候我揍你。

刷一遍你看上量是不是干嘛就LC干嘛，我开另外流量器吧。整来看，你看我是不是一个限制范围的一个拖拽，简单的拖拽，这个时候咱们是不是只传了一个参数。是吧，你要传两个参数干嘛，比如说干嘛不要我这么不要限制范围只你。诶，他还是。限制范围了。最后什么？哦，不对，这边干嘛。如果你存在flag吧，是吧，你现在这flag的是不是干嘛或了是吧，如果你存在flag或者什么。Flag等于什么等等于。嗯，想想这边怎么想，现在我传的时候干嘛，应该不让他执行这个判断了是吧。

那那那那我就这么这么行吧，我说你上来一个flag是吧，也没等什么。Limit等于什么呢？如果你flag等等于t flag等等于负是吧？如果你flag等等于负，那我就变成什么负，其他全部变成求这你传货的时候我不要吗？其他我统一变成去码这个这个能不能看到这你来看下。刷一下，比如说现在我穿的什么吧，那就应该能出去。是吧，我传其他的任何东西。也就我不传，不传也是穷是吧，只要我不传那就是穷，那就有是有限制范围这个功能。

这能讲有什么上来，我们是不是已经干嘛弄的，是必须得有的是吧，他是默认知的，他也是有默认知道，这个可有可无。是不是这样的，OK整理，那我们是现在是不是定义的很动态了。这个能理解吗？你看你干嘛，如果你说把这个做，把这个做成一个库是不是更爽。懂吗？我说我来一个文件叫做什么JSOK叫什么。DRG转给你加吗？那我是不是把这段代码干嘛。OK，走。是不是在那全部干嘛拎过去。这个能不能讲这担保全部。过去那我就不定义了，一个什么方形出来嘛，Ctrl a ctrll，那我现在是不是定流方形出来，那看走你我说把这些注释拿到这个什么API里面来。

好，走，你OK，然后呢，我去干嘛？引引入一下吧，用什么JS底下的什么抓给你加上是吧，能不能听懂我说一下是还是一样。是不是OK，如果做的再狠一点啊，怎么办？一般我们做干嘛，你这么定义的话，问你这样定义的话，你在你的逻辑里边，你还能放个心。D吗？会不会产生冲突？会的吧，因为你相当于是把这个解干嘛，CTRLC过来嘛，是不是定义了两个重叠函数啊，所以我们一般我们会搞一个秘密标识符啊，跟解块RY一样，那怎么办，我们就不能这么写啊，就说我们在写写这个首先有没有交过IF1啊。

这个东西没交过。自调用吗？函数字调用吗？是吧？我这里面写个方就是函数调用吗？你说这个函数会被自己调用吗？是吧？比如说我这边传个window不行，穿个window吗？请在这边干嘛。接一下嘛，是吧，比如说啊，我在这边去画一个对象叫什么多了等于什么。等一个对象是我给这个对象去绑一个方法多了点什么。它们等于CTRL大括号。等于这个方形嘛，把这个方形直接切过来。Ctrl OK上来。

保存一遍，一。CTRL是不是就可以了是吧，那我外面应该怎么调。多了点是不是就可以了。刷一下，刷一下F上看看播什么，多了一种摩差DeFine这个什么。啊，不对，这个W现在是不是在这个问题下，我们应该。给谁啊？OK什么我们说。W点多了一个等于一个对象是吧？你不能在这边画吗？画是什么出不去的，这只是什么？这个作用内部吗？懂吗？DB是什么W点吗？来这里，现在来看一下。算一下，教你。是不是就可以了，跟我们昨天定量是不是就一模一样了。

怎么讲，可如果你现在在页面上面，你还能去挖一个多吗？能吗？能吗？不能了，会给他造成。重读的，所以一般你们用解块的时候，定义方法的时候，也不要用什么多了符了，多了符就给结块去用，懂吗？所以一般我们在这边定义的符号要稍微奇怪一点，懂不懂，比如你可以定一个自己的名字嘛，就叫达姆是不是OK那个吗？达姆点是的是不是这个名字你换成什么。达点GS嘛，是吧，然后呢，这边再调的时候嘛，达点这样子嘛，这边去引引用时也是达点GS嘛，OK，你在你的。JS在那个库上面第一句干嘛，就告诉人家不要再用达达这个变量，对不对，当然以后我们有更好的方案，可是你们学学到这个阶段的话，只能这么做。这个能不能理解，这个必须要理解啊，这点。

你看是不是也是可以的，比如说我在传传的时候我能干嘛，我在我传这个去用这个库的时候，我在用这个库的时候可干嘛，比如说。我什么来一个for，那就应该没有什么。没有这个范围的限制。是不是OK，比如什么，那比如说我让你有范围限制，就应该是什么T啊传个Q嘛，是吧，那我就会有一些范围的限制是吧，当然你说你还需要一个直行系胞，那你给个值，这你那我就有直行系胞。是吧，说你最终还需要一个什么。抽段传一这样弄就你哎就可以变掉了，至于变成什么东西，你还能做的更动态，懂吗？啊，这个时候只是讲一个思想，怎么去封装一个东西，那不就讲啊，这个坎具得过，刚刚没有听懂的，你给我问。今天这个坎必须过掉啊，因为让你们，那你们回去过这个坎不扣对吧，这个坎今天每个人都给我过掉了，然后然后你再回去过去啊。