首页 > 代码库 > D3拖动效果
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="http://www.mamicode.com/orderno" /></td>
<td><input class="inputsty" type="text" value="http://www.mamicode.com/sendname" /></td>
<td><input class="inputsty" type="text" value="http://www.mamicode.com/sendphone" /></td>
<td><input class="inputsty" type="text" value="http://www.mamicode.com/sendadress" /></td>
<td><input class="inputsty" type="text" value="http://www.mamicode.com/recvname" /></td>
<td><input class="inputsty" type="text" value="http://www.mamicode.com/orderno" /></td>
<td><input class="inputsty" type="text" value="http://www.mamicode.com/recvphone" /></td>
<td><input class="inputsty" type="text" value="http://www.mamicode.com/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 = http://www.mamicode.com/da;"<img src="http://www.mamicode.com/+e.dataTransfer.getData(‘text‘)+"/>"
for(var i = 0; i < target.length; i++) {
if(target[i].value =http://www.mamicode.com/="姓名") {
ta[i].value = "http://www.mamicode.com/name";
} if(target[i].value =http://www.mamicode.com/="年龄") {
ta[i].value = "http://www.mamicode.com/age";
} if(target[i].value =http://www.mamicode.com/="性别") {
ta[i].value = "http://www.mamicode.com/sex";
}
}
return false;
});
}
</script>
</html>
D3拖动效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。