周总结

Posted 2021-01-21 maosonglin

毕业设计第九周总结：

上周完成的事情：

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

未完成的事情：

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

学到的新技术：

　　html5元素拖动技术，javascript DOM节点鼠标事件

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

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

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

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

示例：HTML代码

 1 <div class="body flex-grow flex-row">
 2                 <div class="left">
 3                     <div class="char-list">
 4                         <ul>
 5                             <li>
 6                                 <img src="image.src" width="60px" draggable="true" ondragstart="drag(event)">
 7                                 <span v-html="image.name"></span>
 8                             </li>
 9                         </ul>
10                     </div>
11                 </div>
12                 <div class="right flex-grow">
13                     <div class="content" ondrop="drop(event)" ondragover="allowDrop(event)">
14                         <template v-for="(pic,index) in pictures">
15                             <div class="report" :style="getStyle(pic)" onmousedown="capture(event)" onmouseup="release(event)" onmouseover="mouseenter(event)" :data-index = "index" >
16                                 <div class="report-content" >
17                                     <div id="" class="report-toolbar">
18                                         <i class="layui-icon layui-icon-delete float-right" @click="rmGraph(pic,$event)"></i>
19                                         <i class="layui-icon layui-icon-set-sm float-right" @click="setting(pic,$event)"></i>
20                                     </div>
21                                     <div class="report-body" :id="‘graph-‘+index">
22                                         <div class="">
23                                             xhong
24                                         </div>
25                                     </div>
26                                 </div>
27                             </div>
28                         </template>
29                     </div>
30                 </div>
31             </div>

对应的JavaScript代码：

 1 function drag(event){
 2     event.dataTransfer.setData("Text","马小红");
 3 }
 4 function allowDrop(event){
 5     event.preventDefault()
 6 }
 7 function drop(event){
 8     event.preventDefault()
 9     var data = event.dataTransfer.getData("Text")
10     alert(data)
11 }

 

JavaScript DOM节点鼠标事件

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

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

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

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

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