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加载网页时,如果页面处于最顶端时,用户用手指往下拖动,会露出灰色空背景.同样页面在最底部的时候,继续向上拖动,下方也会露出空背景. 要禁止这个拖动效果,可进行 ...

随机推荐

nonrepetitive DNA|repetitive DNA|moderaly repetitive DNA|highly repetitive DNA|selfish gene|junk DNA
5.5 真核生物基因组包含非重复DNA序列和重复DNA序列依据重复序列的频数,可将真核生物DNA做如下分类: 1次即非重复DNA(nonrepetitive DNA,相应的也会更长,随着基因组扩大( ...
java发送email一般步骤
java发送email一般步骤一.引入javamail的jar包: 二.创建一个测试类,实现将要发送的邮件内容写入到计算机本地,查看是否能够将内容写入: public static void mai ...
【java】 field 和 variable 区别及相关术语解释
Having said that, the remainder of this tutorial uses the following general guidelines when discussi ...
用java Graphics生成验证码
以下下是API文档对Graphics的介绍! Graphics 类是所有图形上下文的抽象基类,允许应用程序在组件(已经在各种设备上实现)以及闭屏图像上进行绘制. Graphics 对象封装了 Java ...
Java线程和多线程（三）——线程安全和同步
线程安全在Java中是一个很重要的课题.Java提供的多线程环境支持使用Java线程.我们都知道多线程共享一些对象实例的话,可能会在读取和更新共享数据的事后产生数据不一致问题. 线程安全之所以会产生 ...
Django中的tags,母版和继承,组件,静态文件相关,自定义simpletag和自定义inclusion_tag
Tags for <ul> {% for user in user_list %} <li>{{ user.name }}</li> {% endfor %} &l ...
学习笔记1——下载和安装WordPress
首先,到WordPress官方网站下载WordPress,下载地址https://cn.wordpress.org/txt-download/ 然后,将下载后的文件夹放在www目录下,到浏览器中输入l ...
【JavaScript 5—基础知识点】：正则表达式（笔记）
一.总体概览 1.1,什么是正则又称正规表示法.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符 ...
Git升级迁移
1 原有机器进行升级和备份: https://about.gitlab.com/update/#centos-6 1. Make a backup (Optional) If you would li ...
【Luogu】P3391文艺平衡树（Splay）
题目链接 ddosvoid和自为风月马前卒教了我这道题他们好强啊如果我们要反转区间[l,r] 我们首先把l的前驱旋转到根节点再把r的后继旋转到根节点的右儿子那么此时根节点的右儿子的左儿子所代表 ...

D3拖动效果

D3拖动效果的更多相关文章

随机推荐

热门专题