标签：技术 功能 图表 function draggable for html5 dom节点 icon
毕业设计第九周总结：
上周完成的事情：
未完成的事情：
学到的新技术：
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
