118.尚硅谷_JS基础_拖拽（一）

这个事件的一些基础知识什么绑定啊，委派呀，传播呀，我们都说完了，那接下来呢，我们来说一个事件相关的一个这个，诶练习什么练习呢，我们来说一下我们叫什么呢？叫做一个这个拖拽。什么叫拖拽呀？来整一个东西，来一个div井号一个BOXS1BOXS1，然后我这写点样式，直接来一个这个什么呀，井号BOX1，然后呢，我来一个white一个像素hat一个100个像素，然后background color来一个right，这再来一个什么呢？Position来一个这个啊salute开启绝定位，这一打开是一个100乘以100的一个红色的一个方块对吧？那什么叫拖拽呀，我希望干嘛呢？我鼠标可以拖着这哥们儿是不是门网页去串呀，我想给它放这儿，咔，我就拖这来，我想给它放这，我是不是给它放这来呀？诶，这叫一个什么呀拖拽，那这个功能我们要去怎么做呀？来写一个死qui的标签，我先写一个window，点一个lo拖拽这东西肯定见过是吧？诶，那我们来说一下它怎么去做，还是做之前我们先来分析一下它这个什么呀，整个一个流程我们说什么呢？诶完成可以什么呢，可以使我们这个叫什么呢，拖拽我们这。

BOX1这个元素啊，BOX1的元素，那这功能我们要怎么去做呀，那怎么叫拖拽，那这举例子，那我们桌面举例子，我桌面是不是有图标啊，图标我这一点咔放这儿来了，咔放这儿来了，咔放这来了，这是不是就拖拽呀？哎这个就是一个拖拽，只不过这回我们要拖拽的谁呀？是这个div啊div所以这块我们来先分析一下我们这个拖拽的一个什么呀，流程，流程我们拖拽的整个一个业务逻辑什么样的第一步我们拖拽需要先干嘛，你说我鼠标我跟着晃悠，他跟不跟我走。那这玩意儿很很诡异是吧，说要不是晃晃他给你追过来了，那这玩意很吓人的是吧？拖拽什么时候开始啊？诶我鼠标我跟那点一下行不行，是不是也不行啊，你得干嘛呀，你家鼠标摁下去你还得别撒手吧，然后是不是才开始拖拽呀？诶所以注意叫什么呢？第一件事儿干嘛呢？叫做脏，我们这个鼠标在我们这个背拖拽元素上按下时叫什么呢？我们是开始开始拖拽对吧？诶当按下的时候开始拖拽，你跟这晃悠怎么晃也没事，直到什么呢？跟这你按下我这拖拽是不是开始了，那开始以后呢，干嘛了，当鼠标移动时，我这图标是不是跟着我这个鼠标一启动啊，哎一启动，所以这是我们说的这个第二第二步叫什么呢？叫做一个当我们这个鼠标移动式什么呢？我们这个被拖拽。

元素托窝托之外拽跟随什么呢？跟随我们这个鼠标移动啊，跟随鼠标移动，然后呢，那这是不是就完事了呀？哎，我到这儿你说他要老跟着我这也要了命了是吧？当我鼠标一松开，他是不是就定着不动了呀？哎定着就不动了啊所以第三步呢干嘛呢？第三步当我们这个鼠标松开始，哎，我们这个背拖拽元素是不是固定在我们这个当前位置，哎，你就不能动了，哎所以你会发现我们拖拽整个就什么呀，这么三步先干嘛呢？一点击开始拖拽，我这一动，你跟着我动，我一撒手你就定这啊你就定这，这是这么一个流程，那我们说这东西我们要怎么写呀，我们一发现它有三步，三步实际上对应了什么呀，是不是对应了三个事件呀，诶，第一个叫什么呀，当鼠标在被拖拽元素上。

按下时，那这应该是一个什么事件，我们先说安可Li行不行，可Li是点一下吧，你得干嘛呀，按下你还不能松手，咱们来看看有没有直接看这啊有没有什么on mouse，诶这看有一个叫a mouse，当叫什么呀，叫。

哎，鼠标按钮被按下巴，哎，所以第一个我们要找的事件就是它叫做一个on mouse的，哎，然后呢，这叫什么呀，当鼠标。移动时，它移动这什么时间？诶，这咱们是不是用过呀？On mouse，哎，Move啊，On mouse move还有什么呢？当鼠标松开时，诶，这有什么呀，On mouse up啊，On mouse up，好，那咱们现在就要用到这三个事件，On mouse down on mouse move，还有一个on mouse啊，啊三个事件，好，那接下来我们就可以写了，流程已经分析清楚了，事件也已经找到了，那接下来我们来开始写这个代码，那代码我们先来说，那找仨事件，关键是问题是这仨事件我给谁绑定，一个一个的看，先看这个on档我给谁绑定。

我是不是拖谁给谁绑定啊，哎，拖谁给谁绑定你你不能你不能我一我一点这个我不能拖他的是吧，拖谁给谁绑定，那我要拖谁呀，要拖这个BOXS1啊哎，所以要给这个BOX1绑定，咱们先获取我们这个BOXS1，直接挖一个BOX1等于一个document表，一个get按版ID box1，然后呢，我们来为我们这个box一来绑定一个这个鼠标按下事件直接来一个来一什么呢？来一个box1.1个on mouse down等于个这个function等于function，然后这来写一个A乐的一个，诶叫做诶鼠标按下，哎我们开始。开始拖拽啊开始拖拽，诶直接来看效果一刷新这一你点别的地儿是不是都没事啊，直到一点它走你诶鼠标按下是不是开始拖拽啊，诶开始拽确定好，那第一步我们是不是就完成了呀？诶第一步完成了啊，当鼠标按下元素的时候，我们这开始拖拽，但是你开始拽拽，你不能就开始出拽了，那怎么就开始拽拽，你是不是得让我们第二步啊叫什么呀？当鼠标移动时，跟被拖拽元素是不是跟随鼠标移动啊，那注意了，这on boss move我要给谁绑定也是绑定还是这个问题，我能不能给BOSS1绑定啊，你给BOXSS1绑定又这效果了是吧？啊能往下走了，往上走走不了了，因为你往上走是不是出去了，所以这块就不能给BOX1绑定了，给谁呢？诶，给我们那个document啊，来为我们这个document来绑定一个，这个叫做什么呀，叫做on mouse move事件，跟我们昨天其实那个是一样，直接来一个document点一。

个on mouse，诶move等于的这个function是不是这么一个东西啊，哎，这么一个东西，然后呢，在这里边我们要干嘛呀？诶其实要整这个，当鼠标移动时，是不是被拖拽元素跟随鼠标移动啊，诶那我就需要干嘛了，是不是修改这个bos机的这个位置啊，修改之前我先得获取谁呀，鼠标的坐标吧，哎鼠标坐标，那一说到鼠标坐标了，我就得来一个什么，哎引问的我们这个事件对象来兼容性问题，引问的等于一个引问的，然后或者是一个这个window点引问，然后呢，我们来写一个当鼠标被移动时，我们这个脱拽元素跟随鼠标移动，那实际上我们就先来获取我们这个鼠标的一个坐标，获取我们鼠标的一个坐标，直接来一个Y，一个这个X，我们说什么呀，水平方向等于什么呀，等于invent表一个可LANX，然后呢，这挖一个这个top，等于invent表一个这个LAN。

Y是不是就有了呀，然后来修改我们那个box机的这个位置，我们这儿就先不管那滚条了啊，到时候你们要是整的话，把这滚条也整出也可以啊，这来直接来什么呢？Box1.1个style，点一个left等于left的加上一个PX，这下边是box1.1个style，点一个top等于一个叫做什么呀，加上一个PX，这是不是行了呀？诶一保存咱们来看效果啊，我这一刷新，诶这都没事是吧，我这一点走你。

不跟着我走了呀，哎，跟着我走了这么一个效果啊，但是注意咱们先看一下什么呀，这里边注意了这个事件我是在哪绑定的。在Mo当里边吧，那我问你这个事件我能不能在外边绑定，我如果在外边绑定它变成什么效果，哎，我这一刷新走，你是不是一进来就动了呀，哎，一进来动了，而我们这个拖拽什么时候开始的呀，是当我点的时候开始的吧，所以注意这个事件一定是在我们这个on mouse down这个响应函数的里边绑定的，当我点的时候这块才干嘛呀，才开始啊，一定要注意啊，这东西是在这个里边的，好，那这写完了，我们来看看这拖拽开始了，我这时间是不是没事了呀，只有什么时候开始一点是不是才开始啊，但是又来问题了，哎，行了，到这就定着吧，走，诶，完了。

这这这这这很可惜是吧，你发现你千万别点它一点。哎，是不是甩不掉了，哎，甩不掉了这事很恶心，那什么时候得停这，诶我在这，我这一松手咔，他是不是应该就停这啊哎，那一松手什么时间，是不是我们这个on mouse up呀？哎，当鼠标松开始我们要干嘛呢？哎，我们要这个诶被特拽元素固定在当前位置，那我们先来说，那这事件给谁绑定啊？诶给BOX1是不是行啊，诶咱们试试啊，来一个box1.1个on mouse一个，诶叫做一个up诶当鼠标松开时，我们来说一下，当鼠标松开时被拖拽元素被固定在当前位置，那问题又来了，事件绑定完了诶这来写一下吧，为我们这个box诶为我们这个元素来绑定一个这个鼠标松开事件啊鼠标松开事件，当鼠标松开时被拖着元。

固定在当前位置，他怎么让它固定啊，诶，我用获取当前位置吗？现在先说它为什么会跟着我一块动。为什么我跟着一块动，是不是因为我给他绑定了这个mouse木事件呀？诶他之所以动是因为这个事件还在那如果我不想让它动了，我把这视线取消了是不是就行了呀？诶所以注意啊，如果你当鼠标松开始被推射元素固定当前位置，那怎么办呢？我就取消我们这个document的什么呀，叫做一个on mouse哎，Move事件怎么取消啊，直接document点一个on mouse木等于什么呢？等于no是不是行了，诶给它设置一个空，那这样它事件是不是就没了呀，没了以后还动不动了，哎，就不动了啊，就不动了，所以这整个一个套路就什么呀，当我鼠标按下的时候，我绑定一个事件，当我鼠标松开的时候，我把这时间给它。

取消吧，诶取消我这一保存，咱们来看效果，这一刷新来走你，诶是不是很灵活呀，我这一松手咔。是不是定这了，来接着走你然后我这咔一松手，是不是定这来来往下走走你一停，是不是定这了，诶看着是不是。还可以是吧，有没有啥问题呀，来咱们看一下啊，咱们看一下现在咱们这页面比较简单啊，我把这页面整的干嘛呢？我整的死杂一点，来一个div div呢，我这来一个ID等于一个这个boxs啊，我是不是又整一个div啊，然后呢，这div我在这写一个井号，一个BOX2WHITE呢也来个100个像素呢，也来个100个像素，然后color我们来一个这个yellow吧，一保存，现在一刷新走你诶这块BOX42。

它应该是被它给盖住了是吧，因为他没有开启定位，所以我们这来一个position，来一个a salut1保存一刷新，就跟这那样，诶不放这我给他调整一下位置，放哪呢？放一个这个life的来一什么呢？来一个来一个200个像素吧，然后这hat呢，来一个这个200个像素，给它挪一下位置，一保存一刷新走你。写我写啊，写啥玩意，这是写一个top啊，TOP1刷新是不是这哥们给挪这来了，诶同学说了，你这玩意儿等于这个对我这没啥影响是吧？我们来看看啊，现在看着啊，我这拖它诶很灵活是吧？来注意了，往这拖了，往这拖了诶你看他是不是跑到这个BO2了下边去了，因为box层它是它的这个下边的元素是吧？它它会覆盖它啊会覆盖它往下挪往下挪往下挪往下挪往下挪诶这是不是很有意思呀，注意了，往下松手了啊，我可松手了咔，一松手可松开了是吧？手松开以后应该是什么效果，这红的是不是应该不动了呀？诶但是我们来看看看它啊诶诶。

诶，我我真松手是吧，松手了是吧，哎，为什么怎么还动啊。他不对呀，我应该松手以后你是不是就定这了呀，为什么还动啊，诶注意了，我现在这个on mouse up这个事件绑定给谁了，BOX1了吧？诶BOX1了，来我这往下拖，拖拖拖现在走啊，看着你在这松一点问题也没有，但是当你往下拖的时候，你看我现在鼠标在一上边还是二上边呢，二上边了吧，所以现在你这一松手是触发的二的，这个Mo up还是一的。

二了吧，一点触发二了，但是一的有没有触发呀，没有触发，没有触发，也就是说我那个on Mo move是不是还在呀，所以你发现它是不是还是跟着移动啊，诶跟着移动，诶有同学说，诶老师他不是应该冒泡吗？注意这能冒吗？他们什么什么关系啊，兄弟吧，兄弟可冒不了，只能什么呀，往祖先上报吧，所以你会发现有一个问题，什么问题啊，这玩意儿一拖，这玩意儿是不是一到这是不是停不下来了，这玩意怎么办呀。那这事件我还能不能给BOSS1绑定了，不能了，那给谁绑定，诶其实还得给do绑定，那你给do绑定，你不管在哪搜，是不是都是在do的里边啊，一保存，咱们来看有没有问题，一刷新。还是在这儿。

是不是就没问题了，哎，就没问题了啊，这块一定注意都是给包刀的绑定，但是注意这块你拖的时候呢。那这种情况特别可怕是吧？诶就拖不出来了，因为你点不着他了是吧？哎，点不着他了啊，这累死也拖不出来了是吧？所以把它给搞没了，他把它搞没了好这一块是我们说的这个拖拽，诶那这个东西就完成了啊其实主要是三个事件，诶on down on Bo move，还有一个on Bo up，但是这里边咱们看看啊，还有没有什么问题，现在当我鼠标松开的时候，我是将这个on mouse move事件给它取消了，对吧？诶那我问你了，我这on up事件我取没取消。没取消，那换句话说on up，它在不在来我们来看看啊，这里边我直接来一个有点来什么呢？来一个鼠标松开了一保存，我们来看效果一刷新，现在我这一拖拽，我一松开，是不是出来一个鼠标松开了呀，哎，松开了，然后在这在这儿出来是不是正常的呀，但是现在我已经不点它了吧，看着我点这。

是不是也触发了呀？但注意了，此时此刻这个事件还有没有存在的意义了？没有了吧，它的存在只能给我们捣乱对吧？哎，只能捣乱，它已经没有存在意义了，所以你让他还跟着他好不好？不好吧，所以这个事件我们是不是应该也给他取消了呀？哎，那这块我要怎么取消。是不是一样啊，直接来干嘛呢？取消我们这个document的什么呀，叫做一个on mouse up事件，怎么取消document点一个on mouse up等于什么呢？等于一个，那那这什么效果呀，我先去触发这个事件，触发完了以后呢，先把这个事件取消了，再把这个事件取消了，我这一取消，那相当于我这个事件只挥触发几次呀，一次是不是变成了一个一次性的一个事件呀？诶那这回我们再看什么效果，这样一刷新移动松手是不是触发了呀，然后你在这一松手是不是没事了呀？诶他一拖拽。

是不是就有了呀，但是在这就没事了啊，在这就没事了，所以一定要注意啊，我们这个on mouse up，还有我们这个on mouse down，诶不是这个on mouse move，这两个事件都在什么时候有效，只有在我这个鼠标按下的时候是不是有效啊，当你鼠标一松开，这个事件都没有存在意义，我们应该干嘛给它。取消啊，都应该给它取消掉啊，所以这块一定要注意啊，这两个东西是干嘛的好，那这一块呢，基本上我们就把这个拖拽的功能给它完成了啊，其实这块呢，主要就是三个事件啊，当诶move还有一个up啊，待会尝试去写一下，那你写的同时呢，我要先给你一个问题，你要去思考一下这个问题啊，做一下这问题这个拖拽吧，有的时候感觉好像效果不是那么的好，为啥不那么好呢？你看啊，现在我这一点，我这鼠标是干嘛的呀，是不是跟我这个元素的。

左上角是重叠的呀，你看无论我点哪，我这一点这。是不是也左上角啊，我点这儿，它是不是也最后回到左上角啊，我一点这是不是也左上角啊，这种呢，其实问题也不大，但是有的时候感觉干嘛呀，他体验不太好，你感觉老是说嘛呀跳跳的是吧，感觉很愣这种感觉是吧？哎，我们希望一个什么效果呀？诶看这桌面上，你看我一点中间。他是不是一直在中间啊，哎，我一点这个左上角。是不是一直在左上角啊，我点这个右下角，是不是一直在右下角啊，也就是说我这个鼠标和我这个图片和我这个元素它的相对位置是不是应该是不变的呀，换句话说，我这一点它，我是不是点到这块位置啊，你怎么拖怎么拖它俩干嘛呀，还是在这个位置，那这样是不是才对啊，哎，永远的那个位置，但是现在就变成什么了，是变成这个左上角了，哎，左上角了，那这个问题我们要怎么去解决一下啊，怎么去解决一下，你们呢，一边做一边去思考一下这个问题啊，一边去思考一下这个这个问题我们呢，来评一下。