码迷,mamicode.com
首页 > 其他好文 > 详细

周总结

时间:2018-11-19 13:28:29      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:技术   功能   图表   function   draggable   for   html5   dom节点   icon   

毕业设计第九周总结:

上周完成的事情:

  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:鼠标指针移出节点时调用,移动到子节点上不会调用

周总结

标签:技术   功能   图表   function   draggable   for   html5   dom节点   icon   

原文地址:https://www.cnblogs.com/maosonglin/p/9982514.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!