111 lines
2.9 KiB
Vue
111 lines
2.9 KiB
Vue
<script>
|
|
/* eslint no-console:0 */
|
|
import './draggable.less'
|
|
import Tree, { TreeNode } from '../index'
|
|
import '../assets/index.less'
|
|
import { gData } from './util'
|
|
import BaseMixin from '../../_util/BaseMixin'
|
|
|
|
export default {
|
|
mixins: [BaseMixin],
|
|
data () {
|
|
return {
|
|
gData,
|
|
autoExpandParent: true,
|
|
expandedKeys: ['0-0-key', '0-0-0-key', '0-0-0-0-key'],
|
|
}
|
|
},
|
|
methods: {
|
|
onDragStart (info) {
|
|
console.log('start', info)
|
|
},
|
|
onDragEnter (info) {
|
|
console.log('enter', info)
|
|
this.setState({
|
|
expandedKeys: info.expandedKeys,
|
|
})
|
|
},
|
|
onDrop (info) {
|
|
console.log('drop', info)
|
|
const dropKey = info.node.eventKey
|
|
const dragKey = info.dragNode.eventKey
|
|
const dropPos = info.node.pos.split('-')
|
|
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
|
|
// const dragNodesKeys = info.dragNodesKeys;
|
|
const loop = (data, key, callback) => {
|
|
data.forEach((item, index, arr) => {
|
|
if (item.key === key) {
|
|
return callback(item, index, arr)
|
|
}
|
|
if (item.children) {
|
|
return loop(item.children, key, callback)
|
|
}
|
|
})
|
|
}
|
|
const data = [...this.gData]
|
|
let dragObj
|
|
loop(data, dragKey, (item, index, arr) => {
|
|
arr.splice(index, 1)
|
|
dragObj = item
|
|
})
|
|
if (info.dropToGap) {
|
|
let ar
|
|
let i
|
|
loop(data, dropKey, (item, index, arr) => {
|
|
ar = arr
|
|
i = index
|
|
})
|
|
if (dropPosition === -1) {
|
|
ar.splice(i, 0, dragObj)
|
|
} else {
|
|
ar.splice(i + 1, 0, dragObj)
|
|
}
|
|
} else {
|
|
loop(data, dropKey, (item) => {
|
|
item.children = item.children || []
|
|
// where to insert 示例添加到尾部，可以是随意位置
|
|
item.children.push(dragObj)
|
|
})
|
|
}
|
|
this.setState({
|
|
gData: data,
|
|
})
|
|
},
|
|
onExpand (expandedKeys) {
|
|
console.log('onExpand', arguments)
|
|
this.setState({
|
|
expandedKeys,
|
|
autoExpandParent: false,
|
|
})
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const loop = data => {
|
|
return data.map((item) => {
|
|
if (item.children && item.children.length) {
|
|
return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>
|
|
}
|
|
return <TreeNode key={item.key} title={item.title} />
|
|
})
|
|
}
|
|
return (<div class='draggable-demo'>
|
|
<h2>draggable</h2>
|
|
<p>drag a node into another node</p>
|
|
<div class='draggable-container'>
|
|
<Tree
|
|
expandedKeys={this.expandedKeys}
|
|
onExpand={this.onExpand} autoExpandParent={this.autoExpandParent}
|
|
draggable
|
|
onDragstart={this.onDragStart}
|
|
onDragenter={this.onDragEnter}
|
|
onDrop={this.onDrop}
|
|
>
|
|
{loop(this.gData)}
|
|
</Tree>
|
|
</div>
|
|
</div>)
|
|
},
|
|
}
|
|
|
|
</script> |