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拖动效果的更多相关文章
- vc++ mfc中拖动效果的实现 借助于CImageList
拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道.纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致.其实说起来拖动的实现也很简单,对于有句柄 ...
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- 使用jquery实现简单的拖动效果，分享源码
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkEAAAERCAIAAADzAOSQAAALRklEQVR4nO3dW5LaaAKEUfa/NkfMGu
- GridView拖动效果实现
GridView拖动效果实现 1. 重新GridView控件 package com.whbs.drag.widget; import com.whbs.drag.DragGridActivit ...
- jquery div拖动效果示例代码
div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...
- 使用jQuery实现简单的拖动效果
转自:http://www.muzilei.com/archives/136 如何实现拖动效果? 浏览DEMO 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事 ...
- Web的鼠标拖动效果
以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...
- js 实现win7任务栏拖动效果
前言 在某个时刻, 我认识了一个朋友. 此人在我的教唆下, 踏上了js的不归路. 前天他问我, Win7任务栏拖动效果怎么实现. 我随口就跟他说, 这简单的一逼. 在我一晚上的折腾之后, 一份潦草的代 ...
- Swift - 禁用UIWebView和WKWebView的下拉拖动效果
使用UIWebView或WKWebView加载网页时,如果页面处于最顶端时,用户用手指往下拖动,会露出灰色空背景.同样页面在最底部的时候,继续向上拖动,下方也会露出空背景. 要禁止这个拖动效果,可进行 ...
随机推荐
- MIPS——分支语句
有关指令 li $t1,immediate #load immediate,立即数可正可负 la $t1,address #load address move $t1,$t2 #move $t2 to ...
- x+2y+3z=n非负整数解
#include <iostream> #include <string.h> #include <stdio.h> using namespace std; ty ...
- 面向对象编程OOP-2
用ES6的方法 实现类的继承 //类的定义 class Animal { //ES6中新型构造器 constructor(name,age) { this.name = name; this.age= ...
- css--float浮动
前戏 前面我们学习了CSS相关的知识,现在试想一下,如果我们想把两个div放在一行显示,该怎么处理?前面也说过,div是块级标签,默认占一行,这时候如果想要达成效果,那就要用到float了 float ...
- Use-After-Free
0x00 UAF利用原理 uaf漏洞产生的主要原因是释放了一个堆块后,并没有将该指针置为NULL,这样导致该指针处于悬空的状态(这个指针可以称为恶性迷途指针),同样被释放的内存如果被恶意构造数据,就有 ...
- orcal中创建和删除表空间和用户
1.创建表空间 create tablespace NW_DATA logging datafile 'F:\oracle\product\10.2.0\oradata\nwdb\NW_DATA.db ...
- struts2的多个文件上传
成功效果图: 上篇文章描述了单个文件的上传和配置,下面主要讲解下不同的地方: index.jsp <head> <script ...
- mysql 特定查询条件下导致的大海捞针
order表: order type gmt_create type 取值: 0,1 其中0非常多,1非常少. 当查询条件里 select * from order where type=0 an ...
- WYS APP
UI图:http://modao.io/app/H8eZCQdV1pskjQ7z8bLh 四个tab:我要赛.赛事.运动吧.个人中心 赛事页面 1.主要是个NavigationController 2 ...
- ios之NSURLRequest&NSURLConnection
网络编程中一般都是经过 请求--->连接--->响应 (request --> connection --> response)这个过程. 一般的步骤是这样的: ...