D3拖动效果
2024-08-24 07:17:31
<!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>
最新文章
- OSChina码云试用
- linux系统下yum源的搭建
- gdb使用笔记
- 使用 XMPP 构建一个基于 web 的通知工具——转
- Tomcat 7.0配置SSL的问题及解决办法
- 【实习记】2014-08-29算法学习Boyer-Moore和最长公共子串（LCS）
- HDU1163 Eddy&#39;s digital Roots【九剩余定理】
- sping整合hibernate之二：dao层开发
- Spring Boot快速建立HelloWorld项目
- 第一个ServiceStack服务框架
- 解决无法make uImage的问题
- java的设计模式 - Builder模式
- win10系统下使用markdown2出现的问题
- scrapy简单分布式爬虫
- ajax.beginform控制器中实体为null的问题
- 转：getContextPath、getServletPath、getRequestURI的区别
- python学习之类和实例的属性；装饰器@property
- 聊聊一直困扰前端程序员的浏览器兼容-【JavaScript】
- diogo谈框，仿prompt()方法布局
- 使用jq Deferred防止代码被回调函数分解分解的支离破碎