vue esview 控件拖拽问题（二）Vue.directiove自定义命令

控件拖拽问题（二）

initDropEvents是绑定在bind中的（droppable.js）
而这个droppable是在install_derictive.js中定义的定义命令，
Vue.directive(‘droppable’,droppable)
Vue.directive(‘editable’,editable)
这两个自定义命令在main.js中被执行：
import installDirective from “./plugin/install_directive”//don’t delete,let vue install
理论上我们应该看到v-droppable 和v-editable这些自定义命令在程序中的使用调用，但是没有。
我们看到在后台调用getRichPage中
getRichPage.call(this, this.pageSoulId, (data) => {
this.opModel = data
let ancestorSoul = parse(data.pageSoul)
addRenderFn(ancestorSoul)
resetUid(ancestorSoul.maxUid)
saveSoul()
this.setSoul(ancestorSoul)
walkSoul(ancestorSoul, (soul) => {
resetSoul(soul)
从后台得到的getRichPage的code是这样定义的：

其中，pageSoul如下定义的code：
“exports.cid = ‘100’
exports.name = ‘DropPanel’;
exports.nickname = ‘DropPanel’;
exports.type = ‘Div’;
exports.template=<div{model}>{slot}</div>
exports.desc = ‘拖拽安置面板’;
exports.allow = [];
exports.template= <Div{model} {slotName}>{slot}</Div>
exports.model = {
style: {
type: ‘json’,
value:{},
desc: ‘value’
}
};
exports.script = function () {
};
exports.render = function (createElement) {
const context = this
const store = createElement.store
if(!context.initScript){
context.initScript=true
}
return createElement(‘Div’, {
style:context.model.style.value,
domProps: {
controlConfig: this
},
directives: [
{
name: ‘droppable’
}
],
‘class’: {
‘soul-drop-panel’: true
},
nativeOn: {
click: function (e) {
store.commit(‘dragModule/clear’, e)
}
}
}, context.children.map(function (child) {
return child.render(createElement)
}))
}”
这个代码中定义了dropPanel的render函数，并creatElement，在el中定义了自定义函数droppable：
directives: [
{
name: ‘droppable’
}
也就是说在dropPanel中定义了自定义函数droppable，droppable bind了onDrop等函数，但是为什么onDragEnd和OnDropOver等函数都不响应呢，只响应dragStart？
function initDropEvents(drag) {
drag.ondragenter = onDragEnter
drag.ondragover = onDragOver
drag.ondrop = onDrop
drag.ondragleave = onDragLeave
}