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加载网页时,如果页面处于最顶端时,用户用手指往下拖动,会露出灰色空背景.同样页面在最底部的时候,继续向上拖动,下方也会露出空背景. 要禁止这个拖动效果,可进行 ...
随机推荐
- UVa-10474-大理石在哪
lower_bound()的作用是查找"大于或等于x的第一个位置",但是返回的是地址,所以减去数组的首地址就是偏移量了,也就是整型数字. #include <iostream ...
- perl学习一：探索Perl世界
1.perl4种变量 scalar: $ 纯变量,标量array: @hash: %file: 大写 2.变量组成 1.命名规则 大小写敏感 . 字母数字下划线...2.无关键字,$+其他,但不可以与 ...
- ASP.NET使用Memcached高缓存实例的初级介绍
Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动网站的速度.Memcached ...
- 【转】Hive over HBase和Hive over HDFS性能比较分析
转载:http://lxw1234.com/archives/2015/04/101.htm 环境配置: hadoop-2.0.0-cdh4.3.0 (4 nodes, 24G mem/node) h ...
- Python Cookbook3 Python进阶教程 http://python3-cookbook.readthedocs.io/zh_CN/latest/copyright.html
http://python3-cookbook.readthedocs.io/zh_CN/latest/copyright.html
- Python9-封装-day26（大年初三）
class Room: def __init__(self,name,length,width): self.__name = name self.__length = length self.__w ...
- LeetCode（7）Reverse Integer
题目: Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321 分析: ...
- ZZULIoj 1907 小火山的宝藏收益
Description 进去宝藏后, 小火山发现宝藏有N个房间,且这n个房间通过N-1道门联通. 每一个房间都有一个价值为Ai的宝藏, 但是每一个房间也都存在一个机关.如果小火山取走了这 ...
- Python学习案例
例1.求101到200之间所有的质数,并打印总数. 说明:除去1和它本身之外,不能被其他数整除,就是质数. #!/bin/python #-*- coding:utf-8 -*- #使用集合法 l = ...
- 03006_Servlet简介
1.什么是Servlet (1)Servlet 运行在服务端的Java小程序,是sun公司提供一套规范(接口),用来处理客户端请求.响应给浏览器的动态资源: (2)Servlet的实质就是java代码 ...