120.尚硅谷_JS基础_拖拽（三）

我们继续啊，那咱们这块呢，其实你要注意啊，我没有去处理滚动条的问题，如果你要考虑滚动条的话，你还把这滚动条那给它给它处理一下啊，给它处理一下，那这块我就现在不管它了，这东西跟我们昨天做那一样啊，自己来对照整一下行了，那接下来我们来看，其实大部分这个功能它已经完了，这就就出问题了是吧，大部分功能已经完成了，但是这里边实际上刚才我们看到类似这种问题，其实还会有一些什么呀，有些问题是吧？嗯，这是咋回事啊，很奇怪是吧？诶很奇怪，我们来说一下啊，这种问题来我把这复制一下。再写一个零五拖拽二啊来补充一下这个问题，所以注意啊，它总是有一些比，就是一些比较细节的问题，你需要注意一下，现在是可以的，但是有的时候你看你看我干了什么呢？其实我是干了这个东西是吧，你没看见啊，这边我来写点东西啊，在这呢，我写一段写一段文字吧，写一个，诶我是一段文字，随便写一个，我一保存别刷新，这是要文字呀，诶你要注意了，当我去选中文字的时候，浏览器有一个特点，文字干嘛呀，是不是可以拖呀，诶你这一拖，这文字一放，这干嘛了，他去搜索引擎去给你搜索了吧，现在我这没网，所以他搜找不到服务器，如果有网是候就直接上百度去搜索了呀，诶，所以这注意我们这个浏览器给我们有这么一个特性，它是为了去方便我们去使用的吧，那方面使用的，但是这个东西呢，它去给我们带来一个问题，什么问题呢？诶有的时候你是什么呀，如果你是这么选的，你去拖它还没事是吧。

但是有的时候你摁的什么呢？你可能这按了一下这个ctrl a ctrl a什么呀，全选全选的时候是什么呀，选中页面里边的所有内容，那这时候你再去拖的时候，你发现什么呢。是不是把页面里面的所有东西都选中了，哎都选中了，都选中都选中，但是你发现这是不是就不对了呀，你这一撒手干嘛去了，是不是又搜索去了，然后这哥们是不是还跟着你呢呀，哎还跟着你呢，这整个这个东西是不是就就错了呀，哎就错了，哎所以这块知道什么原因了吧，他就是把你这东西当成文字是吧，你去搜搜下来啊，诶让你去搜去了，所以遇到这种问题呢，这个问题呢，其实呢，它出现几率并不高，除非你是ctrl a了它才能出现，一般是不会去出现，但是呢，那既然有这个问题了，我们是不是得解决一下啊，来解决一下，来咱们看下论题啊，看看我们这个还是CTRL走，你是不是也是这个效果呀，哎，也是这个效果啊，再来看看我们谁呢？我们这个IEIE从来都不会让我们失望的，对吧，哎，这一选呢。

是不是也是这个效果呀，哎，也是这个效果啊，再来看谁呢，我们这个。I8呢，这块也是一全选。是不是也有啊，诶注意啊，Ctrl a全选的时候会出现这种情况啊，或者说一些其他情况会出现它，那这里边我们就需要去处理一下这个问题，那怎么处理呢？那我们来说一下，那这块呢，我们在在这儿来说一下，在在最后这来说啊我们说什么呢？当哎我们去诶拖拽一个这个诶一个这个网页中的这个什么呀，诶内容时，尤其是什么呀，尤其是我们这个文字或者是图片啊突然这个内容时，我们说什么呢？浏览器会什么呢？诶会默认去我们这个搜索引擎中搜索哎内容啊会自动去搜索引擎中搜索内容，那此时就会带来一个问题，此时如果此时会什么呢？会导致我们这个拖拽的什么呀，拖拽功能的这个什么呀。

就是异常啊，哎导致我拖拽功能一个异常，你这一选中一拖，这这这拖沓的这一拖是不就拖不动了，哎整个是把这个重影都给拖出来了是吧？哎拖出一条影来，这玩意儿功能叫功能就错了啊功能错了，那现在我要去解决这个问题，这问题怎么解决呢？那我们说了这是什么呀，这是浏览器默认去干的一件事吧，诶我们说什么呢？诶这个是什么呀？是我们这个浏览器它提供的一个什么呀？诶默认。

行为啊，这是他什么呀，他默认就去干的这么一个事儿，那现在我想不想要这个默认行为，我说不想要啊，不想要怎么办呀，不想要是不是给他取消就行了呀，哎，所以这边我们来说，如果什么呢？如果不希望发生这个什么呢？这个行为则什么呢？则可以通过我们这个re，怎么取消return false啊来取消我们这个默认行为，所以最简单的方式，你在这什么呀，叫做一个on mouse down这个响应函数的这个最后来什么呢？Re t return一个false给它取消了就完事了啊取消完事来一刷新，这回你再选。

还有没有干扰的，哎，是不是就随便拖了呀，诶即使你选了CTRL随便拖了，但是你拖别的是不是就出问题了，因为其他的没绑定事件啊，其他没绑定事件只给他绑定了，他就没事了啊，就没事了，再看我们这个room，我这一点。是不是也OK啊，哎，也OK啊，非常的简单，直接来个取消模型就行了，看看我们这个IE11走你是不是就OK了呀？哎，来再看看我们这个IE8，诶AE8也是从来不会让我们失望对吧？来一选中，诶行了是吧，大家注意啊，刚才是错觉是不是又不行了呀，再来看看是不是呦，很哎呦，还是这么依然很稳定是吧？哎，还是依然很稳定啊，所以这里边我们来说这个东西呢，但是啊，要说一个但是但是这招呢，对我们这个IE8不起作用啊，对IE8不起作用，所以这里边如果你想对付IE8的话，咱们还得干嘛呀，想别的招啊，想别的招IE8RETURN force不起作用，那咱们就要想一个这个比较麻烦一点的招啊，麻烦一点的招来我们来写一个。

写一什么呢？写一个零六，我们来说一下啊，测试测试我们这个IIE8的这么一个东西，那这里边呢，我来写一个简单的啊，来一个b tun button，来一个ID等一个B01，然后呢，直接写一个按钮零一，然后呢来个B02，我们这来一个按钮零二，这么两个按钮，然后CTRL1运行，要是出来两个按钮啊，来咱们用IE8去访问。两个按钮也没啥区别，然后呢，我在这儿来一个script的标签，写一个window，点一个onload等于一个function，等于function，我们在这儿来干嘛呢？诶分别为我们这个两个按钮来绑定这个单击想要函数啊怎么绑定Y一个B天零一等于一个document，点一个GET100IDB天零一，然后呢，一个B天零二等于一个document，点一个get by ID，这是我们BT022个按钮是不是都有了，接下来绑定单角函数BT01，点一个on click等于一个方来什么呢？来一个这个alert一个一，然后呢，复制一下1T2也是onli，让它alert一个二，就这么一个简单的功能，没法再简单了啊，没啥再简单了，来现在一刷新刷新一下我这一点按钮是不是一啊，点按钮二。

不二啊，哎，So easy类啊非常简单，那这我要说什么呢？哎，我说什么呢？在这个IE里边，它有一个方法叫什么呢？来看啊，来一个BTN01.1个叫做set capture啊set capital capital什么意思呢？Capital就是我们这个实际上就是我们补货的意思啊，是一个补货的意思，我们现在来干嘛呢？诶我们来设置设置我们这个蔽填。

诶零一，诶对什么呢？对我们这个鼠标，诶相关的这个事件干嘛呢？进行捕获啊，鼠标严格来说叫什么呢？鼠标这个按下相关的事件进行补货，我们来看什么效果啊，现在我什么也没写，我就来了一个B天01.1个SS开是吧，就来这么一个啊我这一保存，咱们来看这我现在呢一刷新，诶现在看着啊，我应该点一是不是出来1.2出来二啊诶现在我点二走你。诶点二也出来一是吧，诶来我把这个呢，我先注了啊先住了保存咱们再回顾一下啊，刷新点二是不是出来二，点一是不是出来一啊好，我把这set开给它打开一保存咱们来看啊，一刷新1.2走你，诶完了一刷新啊刷新一下1.2走你。

诶它出来什么了，出来一了吧，哎出来一，那这是什么意思呢？诶我们来说一下，当调用一个这个元素的这个set capital，这个set tu，诶这个方法以后，哎这个元素什么呢？我们这个元素将会什么呢？将会把下一次所有的这个什么呀，哎鼠标的这个按下相关的这个事件干嘛呢？诶捕获到自身上啊捕获到自身上什么意思，这就像什么呀，我给B填零一，设置完set capital以后，这B填零一干嘛了？就像一个这什么了，一个这个强盗一样，像一个什么了捷道的一样，什么意思呢？他把所有的那个鼠标点击的事件都揽在他自己身上，什么意思？我设置块一刷新，他说设置完了呀，当我点击按钮零二的时候是干嘛的？

是不是点击点击它那样，但是BT01看不过去了，一看不行啊，我已经设置了set开了，不行，点它就相当于点我所以1.01我这块又给住了吗？他这块你得刷新一下啊，完了还得刷新啊，注意我一点按902走，你是来出发的一样，点零二就相当于点这个零一了，干嘛了，因为他这个事件被我们这个BT01给他二捕获了，能理解吗？他想写什么呀，接道了点B天零二，就像点B天零一，注意了这东西有多厚，不只是点B天零二，我这一刷新随便点一点。是不是都是啊，那注意啊，它是一次性的，只对那次起作用，截完一次以后，下次就不起作用了，我这一刷新随便点，我点这。是不是也是啊，我这刷新我再点刷新按钮，是不是也是啊，哎，我这一刷新我一点这个桌面图标。

是不是也是啊，哎，你就看到它有多横了是吧，你设置完这个size capital以后，它会把这个鼠标这个点击相关的事件都干嘛呀，都揽到自己身上，你点别人就像什么呀，点我一样啊，就像点我一样，你触发按钮零二的事件呢，就会触发谁呀，按钮零一的事件啊，就会触发按钮零一的事件，这是我们说特别横的一个方法是吧，把什么东西都揽到自己身上啊，自己身上，哎，就像什么呀，就像以前我们那个玩那个游戏，有一个技能叫什么叫护卫，那叫护卫啊，你打别人，那个人窜过去，他挨打去，对吧，这块也是一样，你点这个B天02B天零一窜过去干嘛去挨点去能理解吧，诶挨点去这么一个效果，那好，那现在看到这儿了，那有什么想法呢？那刚才我们这来看，当我这块做这个拖拽的时候，来咱们刷新一下，当我做拖拽的时候，我这一拖，它之所以会拖到这个文字，是不是因为我这个帽子，当这个事件是不是也传到这个文字上了呀？诶那我一想那。

这样在我开始拖拽的时候干嘛呢？我让这个B拼，不是我让这个BOXS1干嘛呢？诶变成这个强盗，我给他设置一个set capital，那这样所有的事件是不是都会揽到他自己身上啊，那还会不会到他这儿了，是不是就不会了，哎就不会了啊所以注意对坏一般我们得采用这个手段怎么处理来在我们最上边刚一点一下的时候，在这儿我来干嘛呢？哎，来设置我们这个BOX1诶的什么呀，诶捕获我们这个所有的这个鼠标按下的这个事件，直接来一个来什么呢？Box1.1个set开，这是不是就设置完了呀？诶然后我这一保存咱们再再看，那现在当我一摁下这个东西的时候，它这还出来了是吧？关啊当我一摁一下它的时候，我一刷新，我一摁一下的时候，它是不是就会捕获到所有事件了，有是意味着这个事件不会传到这个文字，那这回应该多。

好，你再看还有没有事了，是不是就没事了，哎，就没有问题了啊，就没有问题了啊好，那这一块呢，我们就这块给它整完了啊，给整完了设置对那个所有的事件进行补货，但是这一块你要注意有一个问题啊，现在它是确实退补货了，我们说了这补货是什么呀，它是一次性的只补货那一次补货完了以后还要补，不补货了就不补货了，所以这种情况呢，他补货以后，诶你看这就出问题了。诶这啥问题呀，他是不是一直在补货呀，为啥呀，这就进入了一个恶性循环，什么意思呀，你看着完了，这就点不了了，看见了已经废了，我一刷新它就进入了一个恶性循环，你看着我现在一点它，我是不是给他设置补货了呀，但是注意那个补货是一次性的，但现在他补没补货呢，没有补货呢，他这权限是不是现在还在啊好，现在我点一个空白地儿，他是不是把这事件又补货到他身上了，补货到他身上就触发了谁呀，这个on mouse down事件吧，这个事件一触发是不是又设置完了，诶他绑定一次又设置一次，绑定一次又设置一次，你会发现什么呢？你即使即使这个已经松开了，诶这块还得演示一下，即使已经松开了。

他是不是还能拖呀，而且我点这是不是都跟点它一样啊，为什么？就是因为他现在一直在对这个事件进行捕获，那我们说我用不用他一直对这个事件进行补货呀，不用，那我们说了，我点完一次，我一松开你是不是就别补货了，哎，我鼠标一松开你就别补货了，那我希望什么呀？当我鼠标松开的时候，是不是不要对这个要取消对这个事件的一个补货呀？哎，那怎么取消呢？那么还有一个方法来鼠标松开是不是在这儿呢呀，On mouse啊在这儿我们来说，当我们这个鼠标松开时，我来干嘛呢？我来取消对这个事件的一个捕获，怎么取消，来一个BOX1设置叫做一个set CA对吧？而取消呢，叫做一个诶release，开release什么样释放，哎，释放我就不再进行补货了，这回再看诶不看它了啊，把它关上。

一刷新。是不是就没事了，诶选择文字呢，也没关系啊，也没关系，这一块就给它整完了啊，给它整完了好，那这是我们这个side cab啊，就给它设置完了，这是专门对付我们这I8的，还是如果你要不对付IE8的这东西你就压根就不用，还根不用，那现在呢，设置完了，设置完了我再看一下它有没有啥问题，那注意了啊，你虽然设置了开以后呢，这个return force呢，你也得写，为什么？因为这个是对其他浏览器的，这个东西只有IE人啊，只有IE人，我们来看看火狐，我一刷新托。

是不是没有任何问题啊，哎，没有任何问题啊，没有任何问题，大家看我们这个GROUP1刷新走你哎哟不不选字了，诶走啊。不动了，来F12看看报错，哎哟。1.3开function什么意思呀，这东西它。不认吧，哎，不认，我们来说一下，那么说set capture这个方法，它只有谁呢？只有IE知识，只有我们这个IE知识，但是什么呢？但是在我们这个火狐中调用时是吧呢，它不会抱错啊，不会报错，而什么呢？而如果使用我们这个crurome调用它会什么呀？会报错，那报错不要紧，但是他什么问题啊，这一报错下边是不是整个都不执行了，哎都不执行了，就导致你会发现我在group里边的拖拽，是不是整个就废了，哎就废了，所以这个东西呢，我们还得需要去判断一下，因为这个东西我是不是只需要在IE里用啊，那我怎么办呀？诶我来一个判断，判断什么呢？If什么呢？Boxs1.1个set开，什么意思，我先看看你有没有，如果你有我才掉没有还掉不掉了，哎不掉我再加一个什么呀，判断啊，如果有我才调用没有呢，就不掉了，一保存，咱们来看效果，这一刷新。

是不是就OK了呀？哎，就不报错了，一松手完了，那等于报错了，还有release的吧，哎，还有release下边是不是还有一个呀？哎，你也需要做一个判断，当然我们先说这啊，这么写可以，还有一种写法，嗯，Box1.1个set capture，然后呢，And and box1.1个set capture，这能看懂吗？诶，And and什么意思，他是不是先看这个呀，这个如果为处还看什么呀？

后边的吧，这个如果为false，这还看不看了，不看了，所以换句话说，如果他有我就执行，如果没有我就不执行，跟那个意思是一样的，当然这种的相对来说更更简单一点啊，简单点这块是我们说的这个下列开，然后下边这个也一样，直接来，咱们先开笑话，咱们这把它也写上啊，来一什么呢，Box一点release CA and and，哎，与它是不是一个效果呀，一个意思啊，咱们来看一刷新。是不是就不包了，诶同样他也不会去选中这个文字了，那这块呢，我们这功能就给它都OK了啊，就OK了，包括我们这个火狐，它一直也是没有问题的啊，没有问题就都OK了，来看我们这IE8 ie8呢还是选中一拖是不是也OK了，诶这一块就都完事了啊，拖展就没有问题了，好，那这块处理完了呢，待会候大家把这东西再看一下啊，主要说这么两个方法，然后回过头来再看一个问题，现在我们这拖了半天呢，只能拖我这个BOS1是吧，那现在我希望什么呢？我希望BO2。

也能拖，那怎么办？诶，那我先把BOX2干嘛呀，获取过来吧，诶来一个BOX2，那我能BOX2也能拖，那这是不是简单呀，我把这东西干嘛呢给它。CTRLC在这来复制一遍，来一个这个BOX2 box2我写到这，其实你们应该已经。看出问题来了是吧？来来找找，报个这玩意儿很恶心是吧？Boss简直太恶心了。诶，你还得注意是吧，还别哎别漏了啊，别漏了，一保存是不是都改完了，我们来看效果，这一刷新B2是不是也可以脱了，哎这样这两个就都可以脱了，但是你发现这明显有个问题，我这整了半天。

我在干嘛呀，我是不是把这整个代码是不是复制了一遍呀，这么做是不是有点太傻了是吧，但是有点太麻烦了是吧，所以这块呢，我不想复制，那怎么办。来，我给你删了，不复制，复制太low了怎么办？来把这个文件复制一下，咱们留一个底儿，这来一个这个007怎么办？和出来这个三，哎，那我是不是既然我都是复制的，那我是不是可以把这个东西作为一个函数给它提取出来啊，哎，提取出来啊，所以在这儿呢，我们来尝试着干嘛呢？哎，提取一个这个专门用来设置我们这个拖拽的这个函数，直接来一个function，叫一个did状，诶拖拽的意思，然后呢，我把这一堆代码直接给它。

这一堆。直接给他CTRLX。CTRLV给它粘过来，我是不是都给粘过来了，但注意啊，你光粘过来还不行，你光粘过来它是不是只对报一绑定了，那注意了，那我们来看我这需不需要传参数，不是，诶传谁呀，诶传一个object，这object谁呀？诶你是不是要给谁开几图就就传谁呀，哎需要它一个参数，参数是什么呢？是开启，开启我们这个拖拽的这个元素，那么于是呢，我们这里边所有的BOXS1都换成哎欧比进，所以你会发现这就是我们函数的一个好处啊，还数一好处，你传谁我就给谁去设置，这也是欧比进，欧比进。主语接主语接这是不是就改完了呀？好，那接下来我们要开启拖拽，那这是简单了，来怎么开启这来说一下，那么一个个来我先干嘛呢？先开启我们这个BOSS1直接来一个叫做一个DR drop我里边传一个BOX1，我这一保存咱们再看你放心不就行了呀，但是BOX2现在还没还不行呢，我是不是没开启啊，诶来再开启什么呢？开启放松二直接也是是吧，你给谁开就直接掉一个是不是就OK了呀，这块也是一刷新。

可以。老开启定位了，刚才好好使，来看刷新一下，看看控制台吧。好不好是吧，那就肯定啊，没改干定看看哪没改吧，Document document。Obj。哦，我好像运行错了，我运行的是二，我这文件是三是吧，三累死我也找不着是吧，累死也找不着，所以先确定这文件是对的啊，确定文件对定再看。

说就行了，那就行了啊，所以我记着我改的挺好的是吧，诶还是挺严谨的一个人是嗯改完了，那你说这有什么好处，假如说现在我这有一图片CTRLC，我想拖拽这个图片行不行啊，哎，这没问题，但是拖拽图片你得注意MGSLC来个图片，拖拽图片的时候咱们先给他一个ID吧，ID就叫一个这个MG1图片，图片的时候你得注意style，我得干嘛呀，我得给它开启，哎绝对定位，不然它是不是动不了啊哎，来一个绝对定位，你想拖图片我先来干嘛呢？先来获取这个图片，在这来直接挂一个这个这个IMG1，等于一个刀的点一个get的摆ID，摆一个MMG1，然后你要拖拽来拖拽来，它直接拽这个什么呀，IMG11保存这就OK了，再来看，放心，图片出来了，你说走你。

走你走，你是不是想怎么拖就怎么拖，哎，就可以进行这个拓展啊，所以这个转的函数呢，就是这么一个作用，但是这里边呢，还有一些可以完善的地方，但是现在呢，目前来讲，我们做到这个地步呢，已经足够了啊，已经足够了，好，这块拖拽我们就做完了，停一下。