D3拖动效果
Posted 个子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了D3拖动效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="file:///G|/1/js/d3.js" type="text/javascript" charset="utf-8"></script> <style> * { margin: 0px; padding: 0px; } body { background: rgb(0, 18, 22); } #header { color: rgb(21, 172, 216); width: 100%; height: 50px; } #main { position: absolute; height: 350px; width: 65px; color: rgb(21, 172, 216); font-family: "微软雅黑"; } button { background: rgb(163, 144, 15); border: none; border-radius: 5px; width: 100px; height: 30px; } .color { background: rgb(9, 84, 106); color: black; border-radius: 5px 0px 0px 5px; } .color:hover { background: rgb(21, 172, 216); color: black; } #main, #shuxing { display: inline; float: left; } #shuxing { background: rgb(9, 84, 106); position: absolute; border: 1px solid white; width: 80%; height: 350px; left: 65px; color: black; } #mid { position: absolute; width: 100%; height: 50px; color: rgb(21, 172, 216); top: 410px; } #shuju { position: absolute; top: 460px; width: 100%; color: rgb(21, 172, 216); } #im, #tab { display: inline; float: left; } th { border: 1px solid yellow; height: 38px; width: 110px; } .tablediv { height: 100%; width: 100%; } .inputsty { height: 100%; border: none; width: 100%; background: rgb(0, 18, 22); color: rgb(21, 172, 216); text-align: center; } td { height: 38px; border: 1px solid rgb(21, 172, 216); width: 110px; background: rgb(0, 18, 22); color: rgb(21, 172, 216); text-align: center; } .spansty{ margin-top: 10px; margin-left: 10px; display: block; display: inline; float: left; width: 100px; height: 40px; background: url(file:///G|/1/img/spanbg1.png); text-align: center; } </style> </head> <body> <div id="header"> <h1>结构定义</h1> </div> <div> <div id="main"> <a><span class="color">人物属性</span></a><br /><br /> <a><span class="color">虚拟属性</span></a><br /><br /> <a><span class="color">社会属性</span></a> </div> <div id="shuxing"> <span draggable="true" class="spansty">姓名<br/>name</span> <span draggable="true" class="spansty">年龄<br/>age</span> <span draggable="true" class="spansty">性别<br/>sex</span> </div> </div> <div id="mid"> <span style="font-weight: bold;font-size: 2em;">样本数据</span> <span style="color: red;"></span> </div> <div id="shuju"> <div id="im"> <img src="file:///G|/1/img/ziduan.png" style="margin-left: 0px; margin-top: 10px;" /><br /> <img src="file:///G|/1/img/ziduanname.png" style="margin-left: 0px; margin-top: 10px;" /><br /> <img src="file:///G|/1/img/yangben.png" style="margin-left: -4px; margin-top: 10px;" /> </div> <div id="tab"> <table border="0px "> <tr> <th> <input class="inputsty" type="text" value="" /> </th> <th> <input class="inputsty" type="text" value="" /> </th> <th> <input class="inputsty" type="text" value="" /> </th> <th> <input class="inputsty" type="text" value="" /> </th> <th> <input class="inputsty" type="text" value="" /> </th> <th> <input class="inputsty" type="text" value="" /> </th> <th> <input class="inputsty" type="text" value="" /> </th> <th> <input class="inputsty" type="text" value="" /> </th> </tr> <tr> <td><input class="inputsty" type="text" value="orderno" /></td> <td><input class="inputsty" type="text" value="sendname" /></td> <td><input class="inputsty" type="text" value="sendphone" /></td> <td><input class="inputsty" type="text" value="sendadress" /></td> <td><input class="inputsty" type="text" value="recvname" /></td> <td><input class="inputsty" type="text" value="orderno" /></td> <td><input class="inputsty" type="text" value="recvphone" /></td> <td><input class="inputsty" type="text" value="srtime" /></td> </tr> <tr> <td>No18</td> <td>张三</td> <td>1308</td> <td>山东济南历区</td> <td>李四</td> <td>1308</td> <td>济南高新区</td> <td>2016-7-20</td> </tr> </table> <button><img src="file:///G|/1/img/but.png"/></button> </div> </div> </body> <script> //获取目标元素 var target = document.querySelectorAll(‘th input‘); var ta = document.querySelectorAll(‘td input‘); //获取需要拖放的元素 var dragElements = document.querySelectorAll(‘#shuxing span‘); //临时记录被拖放的元素 var elementDragged = null; //循环监听被拖放元素的开始拖放和结束拖放事件 for(var i = 0; i < dragElements.length; i++) { //开始拖放事件监听 dragElements[i].addEventListener(‘dragstart‘, function(e) { //设置当前拖放元素的数据参数 e.dataTransfer.setData(‘text‘, this.innerHTML); //保存当前拖放对象 elementDragged = this; }); //结束拖放事件监听 dragElements[i].addEventListener(‘dragend‘, function(e) { //注销当前拖放对象 elementDragged = null; }); } for(var i = 0; i < target.length; i++) { target[i].addEventListener(‘dragover‘, function(e) { //阻止浏览器默认行为 e.preventDefault(); //设置鼠标样式 e.dataTransfer.dropEffect = ‘move‘; return false; }); target[i].addEventListener(‘drop‘, function(e) { //阻止默认行为 e.preventDefault(); //阻止默认行为 e.stopPropagation(); //获取当前被拖放元素的存放数据参数 da=e.dataTransfer.getData(‘text‘).substring(0,e.dataTransfer.getData(‘text‘).indexOf(‘<‘)); this.value = da; //删除被拖放元素 "<img src="+e.dataTransfer.getData(‘text‘)+"/>" for(var i = 0; i < target.length; i++) { if(target[i].value == "姓名") { ta[i].value = "name"; } if(target[i].value == "年龄") { ta[i].value = "age"; } if(target[i].value == "性别") { ta[i].value = "sex"; } } return false; }); } </script> </html>
以上是关于D3拖动效果的主要内容，如果未能解决你的问题，请参考以下文章