fix: draggable组件因为transform属性导致fixed定位失效

packages/fes-ui/examples/views/component/draggable.vue

@@ -3,14 +3,18 @@
         <h1>Draggable 拖拽</h1>
         <h2>概述</h2>
         <p>拖拽改变列表数据时使用, 处理数据顺序问题069</p>
-    
+
         <h2>代码示例</h2>
         <Row class="panel">
             <Cell class="son-panel" span="12">
                 <div class="panel-case">
-                    <Draggable v-model="list" @on-sort-ready="dragready" @on-sort-end="dragend" class="category-draggable">
+                    <Draggable v-model="list" :disabled="disabled" @on-sort-ready="dragready" @on-sort-end="dragend" class="category-draggable">
                         <template slot-scope="{item, index}">
-                            <p>{{item.content}}</p>
+                           <Row>
+                                <Cell span="6"><Wb-input /> </Cell>
+                                <Cell span="6"><p>{{item.content}}</p></Cell>
+                            </Row>
+
                         </template>
                     </Draggable>
                 </div>
@@ -30,7 +34,7 @@
                 </div>
             </Cell>
         </Row>
-    
+
         <h2>API</h2>
         <h3>Draggable props</h3>
         <markdown2></markdown2>
@@ -89,11 +93,19 @@ export default {
     ready: function () {
     },
     methods: {
+        mouseover(){
+            console.log("mouseover")
+            this.disabled = true
+        },
+        mouseout(){
+            console.log("mouseout")
+            this.disabled = false
+        },
         dragready() {
-            console.log(this.disabled)
+            // console.log(this.disabled)
         },
         dragend() {
-            console.log('end')
+            // console.log('end')
         }
     }
 }
@@ -105,6 +117,6 @@ export default {
  .draggable-page .son-panel .example-item{
     padding: 10px 40px;
     border: 1px solid #eee;
-    margin: 0 0 20px 0; 
+    margin: 0 0 20px 0;
 }
 </style>

packages/fes-ui/examples/views/component/modal.vue

@@ -115,6 +115,15 @@
                         <Wb-button type="primary" @click="open3">
                             增加高度
                         </Wb-button>
+                         <Draggable v-model="list" class="category-draggable">
+                            <template slot-scope="{item, index}">
+                            <Row>
+                                    <Cell span="6"><Wb-input /> </Cell>
+                                    <Cell span="6"><p>{{item.content}}</p></Cell>
+                                </Row>
+
+                            </template>
+                        </Draggable>
                         <div v-for="i in len" :key="i" style="height:300px;">
                             我是内容，我是内容
                         </div>
@@ -295,7 +304,21 @@ export default {
     },
     data: function () {
         return {
-            len: 1
+            len: 1,
+            list: [
+                {
+                    content: '序号一',
+                    key: 1
+                },
+                {
+                    content: '序号二',
+                    key: 2
+                },
+                {
+                    content: '序号三',
+                    key: 3
+                }
+            ]
         }
     },
     methods: {

packages/fes-ui/examples/views/component/table.vue

@@ -16,6 +16,7 @@
                         <Column prop="age" name="年龄" sort />
                         <Column prop="adr" name="地址" />
                         <Column prop="status" name="等级" />
+                        <Column name="状态" :component="component1"/>
                         <Column name="操作" :action="action" />
                     </Wb-table>
                     <Wb-button class="mt20" @click="getSelectedTr">获取选择的行</Wb-button>
@@ -229,26 +230,30 @@ export default {
                 age: 24,
                 date: new Date(2016, 9, 10),
                 adr: '北京市海淀区西一旗',
-                status: 1
+                status: 1,
+                open: true
             }, {
                 _selected: true,
                 name: '李晓红',
                 age: 26,
                 date: new Date(2016, 9, 11),
                 adr: '北京市海淀区西二旗',
-                status: 2
+                status: 2,
+                open: true
             }, {
                 name: '隔壁老王',
                 age: 22,
                 date: new Date(2016, 9, 12),
                 adr: '北京市海淀区西二旗',
-                status: 3
+                status: 3,
+                open: true
             }, {
                 name: '我爸是李刚',
                 age: 19,
                 date: new Date(2016, 9, 13),
                 adr: '北京市海淀区西二旗',
-                status: 4
+                status: 4,
+                open: true
             }],
             data3: [],
             action: [{
@@ -295,6 +300,45 @@ export default {
                     // template: "<Wb-Input :value='tdData' readonly>{{tdData}}</Wb-Input>"
                 })
             },
+            component1: function (trData, tdData) {
+                return new Vue({
+                    data: function () {
+                        return {
+                            trData,
+                            tdData
+                        }
+                    },
+                    methods: {
+                        confirm(){
+                            return new Promise((resolve, reject)=>{
+                                this.$Message({
+                                    title: '标题', // 可以传入文本和domString
+                                    template: '是否啊啊啊啊啊？', // 可以传入文本和domString
+                                    buttons: [{ // 最多有两个, 第一条配置第一个button
+                                        text: '确定',
+                                        class: 'xx'
+                                    }, { // 配置第二个button
+                                        text: '放弃',
+                                        class: 'yy'
+                                    }]
+                                }).then(function (index) {
+                                    if (index == 0) {
+                                        resolve()
+                                    }
+                                })
+                            })
+                        }
+                    },
+                    render(h){
+                        return h("Wb-switch", {
+                            props: {
+                                value: this.trData.open,
+                                confirm: this.confirm
+                            }
+                        }, [this.tdData])
+                    }
+                })
+            },
             trClass() {
                 console.log(arguments)
             },

packages/fes-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webank/fes-ui",
-    "version": "0.4.8",
+    "version": "0.4.9",
     "description": "基于Vue2.0，适用于PC管理端的组件库",
     "main": "dist/fes-ui.js",
     "scripts": {

packages/fes-ui/src/components/draggable/draggable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="draggable-container">
+    <div class="draggable-container" style="position: relative;">
         <DraggableItem v-for="(item, index) in value" :key="index" :index="index" :item="item">
             <slot :item="item" :index="index" />
         </DraggableItem>
@@ -77,6 +77,7 @@ export default {
         handlePress() {
             const nodes = this.manager.getOrderedRefs(this.collection);
             this.activeIndex = nodes.findIndex(node => node === this.activeNode);
+            this.containerRect = this.container.getBoundingClientRect();
             this.nodeRect = this.activeNode.getBoundingClientRect();
             this.width = this.nodeRect.width;
             this.height = this.nodeRect.height;
@@ -197,9 +198,9 @@ export default {
         },
         initHelper(cloneNode) {
             this.helper = this.container.appendChild(cloneNode);
-            this.helper.style.position = 'fixed';
+            this.helper.style.position = 'absolute';
-            this.helper.style.top = `${this.nodeRect.top}px`;
+            this.helper.style.top = `${this.nodeRect.top - this.containerRect.top}px`;
-            this.helper.style.left = `${this.nodeRect.left}px`;
+            this.helper.style.left = `${this.nodeRect.left - this.containerRect.left}px`;
             this.helper.style.width = `${this.width}px`;
             this.helper.style.height = `${this.height}px`;
         },