周总结

毕业设计第九周总结：

上周完成的事情：

1. 自定义公式字段。
2. 新建报表
3. 在新建的报表中编辑图表，编辑图表的x轴，y轴

未完成的事情：

1. 新建字段的公式验证
2. 图表数据的查询
3. 图表数据的展示

学到的新技术：

　　HTML5元素拖动技术，JavaScript DOM节点鼠标事件

HTML5元素拖动，网页中的节点是支持拖动，这是浏览器提供的功能，不需要我们去实现页面元素的拖动的具体实现。我们需要做的只要三件事情。

一、 将待拖动的元素的dragable属性设置为true。并未该节点设置ondragstart事件。在该事件回调函数中设置当该节点拖动时要传递的数据。

二、 设置拖动元素放置到的元素的ondragover事件，该事件表示当有某个节点拖动到该元素上（鼠标还没有放开）。该事件中只需要阻止事件冒泡传递就行了。

三、 设置放置元素的ondrop事件。在该事件中接受被拖动元素在ondragstart事件中设置的要传递的参数，并且做出其他操作（比如，将被拖动的元素添加到放置元素中）。

示例：HTML代码

<div class="body flex-grow flex-row">
                <div class="left">
                    <div class="char-list">
                        <ul>
                            <li>
                                <img src="image.src" width="60px" draggable="true" ondragstart="drag(event)">
                                <span v-html="image.name"></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="right flex-grow">
                    <div class="content" ondrop="drop(event)" ondragover="allowDrop(event)">
                        <template v-for="(pic,index) in pictures">
                            <div class="report" :style="getStyle(pic)" onmousedown="capture(event)" onmouseup="release(event)" onmouseover="mouseenter(event)" :data-index = "index" >
                                <div class="report-content" >
                                    <div id="" class="report-toolbar">
                                        <i class="layui-icon layui-icon-delete float-right" @click="rmGraph(pic,$event)"></i>
                                        <i class="layui-icon layui-icon-set-sm float-right" @click="setting(pic,$event)"></i>
                                    </div>
                                    <div class="report-body" :id="'graph-'+index">
                                        <div class="">
                                            xhong
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

对应的JavaScript代码：

function drag(event){
    event.dataTransfer.setData("Text","马小红");
}
function allowDrop(event){
    event.preventDefault()
}
function drop(event){
    event.preventDefault()
    var data = event.dataTransfer.getData("Text")
    alert(data)
}

JavaScript DOM节点鼠标事件

onmousemove:当鼠标指针在dom节点上移动时回调。

onmouseenter: 鼠标指针移动到节点上时节点（不需要点击事件），不包括子节点。

onmouseover：当鼠标指针移动到节点上时调用，包括子节点。

onmouseout：鼠标指针移出节点时调用，移动到子元素上也会调用

onmouseleaf：鼠标指针移出节点时调用，移动到子节点上不会调用