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加载网页时,如果页面处于最顶端时,用户用手指往下拖动,会露出灰色空背景.同样页面在最底部的时候,继续向上拖动,下方也会露出空背景. 要禁止这个拖动效果,可进行 ...
随机推荐
- 双击窗体是模拟键盘上的Tab键
实现效果: 知识运用: SendKeys类的Send方法 //向活动应用程序发送击键 public static void Send (string keys) 实现代码: private void ...
- 基于PassThru的NDIS中间层驱动程序扩展
基于PassThru的NDIS中间层驱动程序扩展 独孤求真 概要:开发一个NDIS驱动是一项相对复杂的工作,这一方面是由于核心驱动本身 ...
- FTP文传协议的应用
我开发的项目中一直用到都是AFNetworking上传图片的方法,最近老大说要用FTP上传,网上的资料很少,毕竟这种上传方式现在用的不多了,于是花了一天时间学习了FTP文件传输协议.下面是我的个人理解 ...
- vue-router介绍及简单使用
一.vue-router介绍 vue-router是vue官方提供的一个路由框架,控制页面路由,使用较为方便. 1.路由模式 hash(浏览器环境默认值),使用 URL hash 值来作路由,支持所有 ...
- Linux基础学习系列目录导航
Linux基础学习-通过VM安装RHEL7.4 Linux基础学习-命令行与图形界面切换 Linux基础学习-基本命令 Linux基础学习-RHEL7.4之YUM更换CentOS源 Linux基础学习 ...
- struts2命名空间与访问路径
比如项目deom的struts.xml中有如下片段 Java代码 <package name="demo" extends="struts-default" ...
- Ubuntu中安装配置 JDK与apache
一,前期准备: 1.下载apach网址:https://tomcat.apache.org/download-90.cgi 3.下载:jdk网址:http://www.oracle.com/techn ...
- CSS3-文本-text-overflow
text-overflow 语法: text-overflow : clip | ellipsis 取值说明: 1.clip:表示不显示省略标记(...),而只是简单的裁切,需要在一定的高度范围内配合 ...
- VisionPro工业视觉的标定方法
工业视觉常用的几种标定方式. 计算像素比 有些时候我们需要的检测数据并不需要特别准确,并且手边没有其它标定工具,可以使用这种方法大概算一算每个像素对应多大距离. 找一个知道距离的物体,测出它的像素距离 ...
- 4，list，list的列表嵌套，range
list 索引,切片+步长 # li = [, True, (, , , , , , '小明',], {'name':'alex'}] #索引,切片,步长 # print(li[]) # print( ...