1

miniForm/src/index.html

@@ -57,7 +57,7 @@ <h2>控件列表</h2>
           <td style="width:100%;">
             <a style="cursor:default;padding:2px;padding-left:5px;">控件容器</a>
             <span class="separator"></span>
-            <a class="mini-button" iconCls="icon-remove" plain="true" onclick="delAll()">清空控件</a>
+            <a class="mini-button" iconCls="icon-remove" plain="true" id="delAll">清空控件</a>
             <a class="mini-button" iconCls="icon-add" plain="true" id="onSave">保存</a>
           </td>
 

miniForm/src/index.js

@@ -13,6 +13,7 @@
 import {G} from "./js/globle"
 import createCDom from "./js/createCDom"
 import sortable from "./js/sortable"
+import {show} from "./js/method"
 
 
 let data = G.formData
@@ -23,7 +24,15 @@ $(function(){
 
 
   var save = mini.get("onSave");
+  var delAll = mini.get("delAll");
+  delAll.on("click",function(){
+    $("#formBuild>li").each(function(i,e){
+      e=$(e)
+      e.addClass("ball")
+      show(e,1);
+    })
 
+  })
   save.on("click",function(){
     console.log(data);
   })

miniForm/src/js/dragInsert.js

@@ -28,4 +28,6 @@ export default function dragInsert(filedsWrap){
   }
 
   mini.parse();
+
+
 }

miniForm/src/js/fieldTemplateEvent.js

@@ -14,6 +14,7 @@ let vv = ""
 
 let data = G.formData
 
+
 export default function fieldTemplateEvent(u,filedsWrap,fields,attrData,fn){
   var color=["red","orange","yellow","green","pink","blue","black","gray"]
   var buttonWrapS= G.buttonWrapS
@@ -71,9 +72,9 @@ export default function fieldTemplateEvent(u,filedsWrap,fields,attrData,fn){
         formAttribute.empty()
       }
       filedsWrap.empty()
-      filedsWrap.removeClass("lineFeed").addClass("ball")
+      filedsWrap.removeClass("active").addClass("ball")
       show(filedsWrap,1);
-      //data.pop()/
+      data.pop()
     }
     if($(this).hasClass("buttonedit")){
       console.log(data);

miniForm/src/js/method.js

@@ -13,15 +13,10 @@ export function show(filedsWrap,direction){
   var color=["red","orange","yellow","green","pink","blue","black","gray"]
   flake= $('<p class="tinyBall" style="background:#000"></p>')
 
-  //获取页面的宽度，利用这个数来算出，雪花开始时left的值
-  var documentWidth = $(document).width();
-
-  //获取页面的高度 相当于雪花下落结束时Y轴的位置
-  var documentHieght = $(document).height();
 
   //定义生成一片雪花的毫秒数
   var millisec = 180;
-  var ll = 3
+
   var vanish=2000
   //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
   var timer=setInterval(function() {
@@ -31,18 +26,12 @@ export function show(filedsWrap,direction){
       clearInterval(timer)
       if(direction != 0){
         filedsWrap.remove()
-      }else{
-        //filedsWrap.css("opacity",1)
-
       }
     },vanish)
     //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
     //var endLeft = Math.random() * 300;
-    var endLeft =parseInt(Math.random()*100+(-50))
-    var endTop =parseInt(Math.random()*100+(-50))
-
-    //随机生成雪花大小
-    var flakeSize = 5 + 20 * Math.random();
+    var endLeft =parseInt(Math.random()*50+(-25))
+    var endTop =parseInt(Math.random()*50+(-25))
 
     //随机生成雪花下落持续时间
     //var durationTime = 5000 * Math.random();
@@ -56,18 +45,18 @@ export function show(filedsWrap,direction){
 
     //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中
 
-
-
+    //console.log(filedsWrap.width()/2);
     flake.clone().appendTo(filedsWrap).css({
-      "left": direction==1 ? 0 :endLeft,
+      //"left": direction==1 ? filedsWrap.width()/2 :endLeft,
+      "left": direction==1 ? filedsWrap.width()/2 :endLeft,
       "opacity": startOpacity,
       //"font-size": flakeSize,
-      "top": direction==1 ? 0 :endTop,
+      "top": direction==1 ? filedsWrap.height()/2 :endTop,
       "background":color[parseInt(Math.random()*color.length-1)]
     }).animate({ //执行动画
-      "left":direction==1 ? endLeft :0,
+      "left":direction==1 ? endLeft :filedsWrap.width()/2,
       "opacity": endOpacity,
-      "top": direction==1 ? endTop :0,
+      "top": direction==1 ? endTop :filedsWrap.height()/2,
     }, durationTime, function() {
       $(this).remove();
     });