HTML5程序设计-HTML5拖放.pptVIP

require.config()方法 使用require.config()方法可以对模块的加载行为进行自定义。require.config()写在主模块（main.js）的头部。require.config()方法的参数就是一个对象，这个对象的paths属性指定各个模块的加载路径，例如： 　require.config({ 　　　　paths: { 　　　　　 jquery: jquery.min,　　　　　　 vue: veu.min,　　　　　　 abc: abc.min 　　　　} 下面的代码指定默认加载脚本的路径为js/lib 　　paths: { baseUrl: js/lib, 　　　　　jquery: jquery.min,　　　　　　 vue: veu.min,　　　　　　 abc: abc.min 　　　　} 也可以在各脚本前面加上路径 　　　paths: { 　　　　　 jquery: js1\jquery.min, 　　　　 vue: js2\veu.min, 　　　 abc: js3\abc.min 　　　　} 5.4.2 注册vuedraggable.js组件 首先使用下面的语句可以引入vuedraggable.js。 require([vue,vuedraggable],function(Vue,draggable){ 下面就可以使用draggable，代表vuedraggable.js了。然后使用下面的语句注册vuedraggable.js。 Vponent(draggable, draggable); 5.4.3 在HTML中使用vuedraggable.js组件 draggable :list=list2 :move=getdata @update=datadragEnd :options={animation: 300,handle:.dargDiv} transition-group name=list-complete div v-for=element in list2 :key= class=list-complete-item div class=styleclass dargDiv{{element.id}}/div div class=styleclass{{}}/div /div /transition-group /draggable 参数说明 ● list：指定具有可以拖动的元素的列表对象。 ● move：指定开始拖动时调用的js函数。 ● update：指定拖动结束时调用的js函数。 ● options：指定拖拽效果行为的相关配置。Animation指定拖动元素到位所用的动画时间（单位为毫秒）；handle指定可拖动元素的class。 transition-group元素 transition-group元素可以为元素增加过渡动画，也就是元素从一处移动至另一处的过程中的动画效果。transition-group元素的name属性，用来指定一组过渡动画的class名。name属性作为过渡动画的class名的前缀。可选的后缀如下： ● -item：指定应用过渡动画的元素的样式和过渡时长。例如，如果transition-group元素的name属性为list-complete，则list-complete-item的样式可以是如下代码： .list-complete-item { transition: all 1s; height:50px; line-height: 50px; background: #000; color:#fff; text-align: center; font-size:24px; margin-top:10px; } 过渡动画的时长为1s。 -enter和-leave-active：移动元素可以分为2个过程，在新位置插入元素，从旧位置上删除元素。插入元素时，是先插入，再动画的，所以应用以-enter为后缀的class;而在删除元素时，是先动画，再删除的，所以应用以-leave-active为后缀的class。例如，如果transition-group元素的name属性为list-complete，则list-complete-enter和list-complete-leave-active的样式可以是如下代码： .list-complete-enter, .list-complete-leave-active { opacity: 0; height: 0px; margin-top: 0px