可以同时设置 dragstart、dragend 和 dragover、dragleave、drop 这两类事件
被拖动元素（设置 draggable="true"）触发：
dragstart - 拖动开始
drag - 拖动过程中持续触发
dragend - 拖动结束（无论是否成功放置）
放置目标元素触发：
dragenter - 被拖动元素进入
dragover - 在被拖动元素上方移动
dragleave - 被拖动元素离开
drop - 在被拖动元素上释放
使其既能被拖动又能接收其他拖动元素。
备份：
添加卡片分类
//初始化代码块
function initCodeBlocks() {
需要改的地方（允许子容器的）：
//添加代码块到画布 - 且同步添加到全局对象中
function addCodeBlockToArea(blockType, x, y, parent = '#programmingArea') {
// 将代码块添加到全局对象中，这里应该要放置到指定id的代码块对象中，如果没有才是全局对象中 需要 cardId cardChildBox cardChildBoxIndex 设置
// 注意这里没有多级嵌套
if(globalState.cardId){
//删除全局对象中的某个卡片
function removeBlockFromState(element, blockId) {
//特殊卡片事件 点击if添加按钮 if elseif else
//添加 如果 中删添加钮的事件
if(blockData.type == 'if' || blockData.type == 'ifelse' || blockData.type == 'ifelseifelse'){
//3.逻辑控制卡片需要添加对象的子卡片（展示）
if(blockData.type == 'if' || blockData.type == 'ifelse' || blockData.type == 'ifelseifelse'){
//4.对于需要支持卡片放置的卡片，添加对应的拖拽事件支持
if(blockData.type == 'if' || blockData.type == 'ifelse' || blockData.type == 'ifelseifelse'){
用于修改属性
$('body').on('change', 'input', function() {
$('body').on('input', 'textarea', function() {
$('body').on('click', 'select', function() {
执行代码(code).then(responses => {
try {
showOutput('执行成功', responses, 'success');
} catch (error) {
showOutput('执行错误', error.message, 'error');
}
}).catch(error => {
alert('代码执行失败');
})
