自定义扩展的编辑器插件无法正常拖拽页面元素

Creator 2.x
#1

  • Creator 版本： 2.3.2

  • 目标平台：Chrome

  • 重现方式：必现

  • 之前哪个版本是正常的：浏览器可以正常拖拽

  • 编辑器操作系统： windows 10

  • 重现概率： 100%

我按照官方的编辑器扩展文档尝试写一个自己的材质编辑器，我希望使用html的方式编写panel页面。发现写好的html页面在浏览器里直接运行是可以正常拖拽页面元素的，但是使用cocos 编辑器用插件的方式运行页面就无法正常拖拽。

浏览器正常拖拽页面元素的展示：

浏览器正常表现.gif960×810 130 KB

做为插件使用cocos打开无法拖拽展示：

插件不正常表现.gif960×810 318 KB

插件package.json

{
  "name": "materialeditor",
  "version": "0.0.1",
  "description": "The package template for getting started.",
  "author": "eldn",
  "main": "main.js",
  "main-menu": {
    "i18n:MAIN_MENU.package.title/MaterialEditor": {
      "message": "materialeditor:open"
    }
  },
  "panel": {
    "main": "panel/index.html",
    "type": "simple",
    "title": "materialeditor",
    "width": 1080,
    "height": 720,
    "engineSupport": true
  }
}

panel页面代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
 

</style>
<script type="text/javascript">
function allowDrop(ev)
{
	ev.preventDefault();
}

function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
	ev.preventDefault();
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

</body>
</html>

最小化的测试工程：
PluginProblem.zip (772.5 KB)

#2

@xu_yanfeng@VisualSJ 求大佬们指点一二

#3 
@dragstart="onDragstart"
@dragover="onDragover"

onDragstart(event){
    // 非常重要
    event.stopPropagation();
}

onDragover(event){
    // 非常重要
    event.stopPropagation();
}
1赞
#4

谢谢，问题解决了。
多请教一下，为什么不停止事件的传递就无法拖住呢？

#5

参考dom事件的冒泡机制

#6

兄弟，你的拖动搞掂了吗？可以发出来看看吗？？？