AI-Ming
AI-Ming

HTML5-简单拖放操作

HTML5的拖放操作

HTML5的拖放

概念：在HTML5中，拖放是一种常见的特性，可以抓取元素并拖入不同的位置。任何元素都可以被拖放。

这种拖放操作仅限于在浏览器内的元素间拖放，不能实现跨应用拖放

其中图片，链接默认是开启的

实例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单拖放title>
		<style>
			#square{
				width:300px;
				height:200px;
				background:blue;
			}
			#box{
				width:300px;
				height:200px;
				border:1px solid black;
			}
		style>
	head>
	<body>
		<div id="square" draggable="true">div>
		<div id="box">div>
	body>
html>

运行结果:
HTML5-简单拖放操作_第1张图片

拖放事件

在HTML5的拖放操作中，首先要明确拖拽元素和目标元素

  • 拖拽元素，指的是在页面中设置了 draggable=“true” 属性的元素。
  • 目标元素，页面中的任何一个元素都可以成为目标元素。

拖放事件主要分成两个部分：拖拽元素事件和目标元素事件

拖拽元素事件

事件 描述
ondragstart 拖拽前触发，拖拽瞬间发生的事情
ondrag 对象被拖拽时每次鼠标指针移动都会触发
ondragend 拖拽对象时用户释放鼠标按键的时候触发

目标元素事件

事件 描述
ondragenter 鼠标指针初次移到目标元素上并且正在进行拖拽时触发，相当于onmouseover事件
ondragover 拖拽时鼠标指针移到某个元素上的时候触发
ondragleave 拖拽时鼠标指针离开某个元素的时候触发，相当于onmouseout事件
ondrop 拖拽结束，放置元素时触发

实例：

DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>触发拖放事件title>  
    <style>  
        #box{  
            width:340px;  
            height:250px;  
            border:1px solid black;  
         
        }  
    style>  
head>  
<body>  
    <img src="../img/a.jpg" alt="" id="img1" draggable="true">  
    <div id="box">div>  
    <script>  
        // 获取元素  
        var oImg=document.getElementById("img1");  
        var oBox=document.getElementById("box");  
        // 拖拽元素事件  
        // 拖拽开始  
        oImg.ondragstart=function(ev){  
            ev.dataTransfer.setData("text/plain", ev.target.src); // 设置数据类型和数据  
            this.style.border="1px solid red";  
        };  
        // 拖拽的时候  
        oImg.ondrag=function(ev){  
            document.title="ok";  
        };  
        // 拖拽结束  
        oImg.ondragend=function(){  
            this.style.border="none";  
        };  
        // 目标元素事件  
        // 进入目标元素  
        oBox.ondragenter=function(){  
            this.style.background="skyblue";  
        };  
        // 拖拽到目标元素  
        oBox.ondragover=function(ev){  
            // 要想触发drag事件，就必须在dragover事件中阻止默认行为  
            ev.preventDefault();  
        };  
        // 离开目标元素  
        oBox.ondragleave=function(){  
            this.style.background="orange";  
        };  
        // 在目标元素中释放  
        oBox.ondrop=function(ev){  
			var data = ev.dataTransfer.getData("text/plain"); // 获取数据  
            var img = new Image(); // 创建一个新的Image对象  
            img.src = data; // 设置图片源为拖拽的数据（即图片的URL）  
            this.appendChild(img); // 将图片添加到目标元素中  
            alert("success!"); // 弹出成功提示框  
        }  
    script>  
body>  
html>

运行结果:

dataTransfer对象

dataTransfer 对象用于从被拖拽元素向目标元素传递字符串格式的数据

setData()方法

语法：以指定格式给 dataTransfer 对象赋予数据。

要解决Firefox下的拖放问题，必须设置 setData()方法，才可以拖放除图片之外的其他标签。

语法格式：

setData(sFormat,sData);

说明如下：

  • sFormat属性定义数据的格式，也就是数据的类型
  • sData 属性为待赋值的数据
getData()方法

语法：从 dataTransfer 对象中获取数据，根据 key，获取相应的value

语法格式如下：

getData(sFormat);

sFormat属性代表数据格式，用来保存数据类型的字符串，取值时 text 或 URL
案例：

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dataTransfer对象title>
		<style>
			#box{
				width:340px;
				height:250px;
				border:1px solid black;
			}
		style>
	head>
	<body>
		<img src="../images/p1.jpg" alt=""id="img">
		<div id="box">div>
		<script>
			// 获取元素
			var oImg=document.getElementById("img");
			var oBox=document.getElementById("box");
			// 方法
			oImg.ondragstart=function(ev){
				ev.dataTransfer.setData("text",ev.target.id);
			}
			oBox.ondragover=function(ev){
				ev.preventDefault();
			}
			// 在目标元素中释放
			oBox.ondrop=function(ev){
				var mydata=ev.dataTransfer.getData("text");
				ev.target.append(document.getElementById(mydata));
			}
			
		script>
	body>
html>

运行结果:
HTML5-简单拖放操作_第2张图片

你可能感兴趣的:(html+css,html5,前端,html)

  • i510300h和i78750h参数对比哪个好 妙龙 笔记本
    i510300H是笔记本平台的标准电压处理器，为四核心八线程，主频2.5GHz，睿频4.5GHz，45WTDP，8M三级缓存，passmark跑分为9026分。我的笔记本就是活动时8折抢购的https://list.jd.com/list.html?i7-8750H的规格是6核心12线程，coffcelake架构，主频2.2GHz，单核最大睿频4.1GHz，六核最大睿频3.9GHz，L3缓存9MB
  • 「前端+鸿蒙」鸿蒙应用开发-TS-模块化 吴维炜 大前端开发前端鸿蒙harmonyos华为typescript
    在TypeScript中，模块化是一种将代码分割成独立单元的方式，每个单元可以封装特定的功能或数据。模块化有助于保持代码的组织性、可维护性和可重用性。TypeScript支持ES6模块标准，这意味着你可以使用import和export语句来创建模块。TS快速入门-模块化导出模块成员使用export关键字可以将类、接口、类型、函数或变量导出，以便它们可以在其他文件中被导入。//myModule.ts
  • 腾讯云通过API怎样调用deepseek ZhangJiQun&MXP 2024大模型以及算力教学智能合约语言模型人工智能自然语言处理深度学习
    腾讯云通过API怎样调用deepseek目录腾讯云通过API怎样调用deepseekhtml方式curl方式重点说明：不需要SK，仅仅使用ip和端口号html方式<metacharset=
  • Pinia入门 qincjun 前端学习指南pinia
    一、铺垫pinia官网：https://pinia.vuejs.org/zh/getting-started.html以下的内容全部来自官网；只不过有时候访问官网上不去；只能自己扒下来；pinia的前端使用非常简单；只需要掌握几个步骤就可以二、套路1.用你喜欢的包管理器安装pinia：yarnaddpinia#或者使用npmnpminstallpinia2.创建一个pinia实例(根store)并
  • 前端开发：CSS选择器 qincjun css前端
    一、基础选择器1.1标签选择器通用型，一次将所有的同类型标签设置成相同属性；p{color:red;}div{color:green;}1.2类选择器类名用.(点)开头的.eat{color:red;}.sleep{color:blue;}.play{color:black;font-size:30px;}吃饭//给段落赋予一个class类名；是此类名的是一样的CSS格式睡觉//一个元素可以赋予多
  • Vue前端框架的使用 不想秃头的小杨 Vuevue.js前端框架javascript
    1.正文vue前端框架1.1什么是Vue1.2如何使用vue$Title${{name}}{{age}}/*创建一个Vue对象*/varapp=newVue({//把该对象挂载到div标签上el属性是必有el:"#app",//data:数据区定义一些数据这些数据得类型可以是任意类型。data:{name:"张三",age:15,hobby:["游泳","看书","玩游戏"],}})总结:(1)导
  • 前端框架Vue内容回顾 GISer_Jinger JavascriptVue前端框架vue.js前端
    前端面试Vue必备内容详解如果你正在准备Vue相关的前端面试，这份详细指南将帮助你掌握Vue核心知识，助你高效备战面试。1.Vue基础知识1.1Vue的核心概念声明式渲染：Vue采用数据驱动视图的方式，通过{{}}语法或v-bind绑定数据，无需手动操作DOM。组件化开发：Vue提供了单文件组件（SFC），支持HTML、CSS、JS组合在.vue文件中，提高代码复用性和可维护性。数据驱动：Vue采
  • python自动化框架pytest_全功能Python测试框架：pytest weixin_39637646
    python通用测试框架大多数人用的是unittest+HTMLTestRunner，这段时间看到了pytest文档，发现这个框架和丰富的plugins很好用，所以来学习下pytest.image.pngpytest是一个非常成熟的全功能的Python测试框架，主要有以下几个特点：简单灵活，容易上手支持参数化能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动
  • print不起作用 pytest_全功能Python测试框架：pytest 吕欲知 print不起作用pytest
    python通用测试框架大多数人用的是unittest+HTMLTestRunner，这段时间看到了pytest文档，发现这个框架和丰富的plugins很好用，所以来学习下pytest.pytest是一个非常成熟的全功能的Python测试框架，主要有以下几个特点：简单灵活，容易上手支持参数化能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动化测试、接口自动化
  • 前端三大主流框架：React、Vue、Angular m0_54851477 前端react.jsvue.js
    文章目录一、React、Vue、Angular简介二、React初始化案例三、Vue初始化案例四、Angular初始化案例五、相关链接一、React、Vue、Angular简介前端三大主流框架分别是Angular、React和Vue。以下是这三个框架的详细概述：Angular：Angular原名AngularJS，诞生于2009年，由Google开发并维护。它是一个完整的框架，提供了数据绑定、组件
  • 【从0带做】基于Springboot3+Vue3的高校食堂点餐系统 ADFVBM 面试学习路线阿里巴巴java
    大家好，我是武哥，最近给大家手撸了一个基于SpringBoot3+Vue3的高校食堂点餐系统，可用于毕业设计、课程设计、练手学习，系统全部原创，如有遇到网上抄袭站长的，欢迎联系博主~详细介绍https://www.javaxm.cn/star/gxstdc.html项目在线体验地址体验地址：（请电脑端浏览器访问）：http://43.142.9.148:81/用户账号：aaa密码：123456系统
  • 后端使用Spring Boot框架 + 前端VUE 实现滑动模块验证码 ADFVBM 前端springbootvue.js
    在现在常用的登录验证码方式有很多种，但是都不可避免被攻击，但是有很多方式可以防止被攻击，从而进行维护。现在我就讲解一下滑动块验证码的实现方式：这个是前端代码，我使用的是vue，在使用的时候注意：注意几个关键点：使用Vue的data函数来存储组件的状态，如isDragging、sliderPosition等。使用Vue的mounted生命周期钩子来获取容器和滑块的宽度。使用Vue的ref属性来方便地
  • Python满屏飘字代码 Want595 趣味编程python开发语言
    系列专栏《Python趣味编程》《C/C++趣味编程》《HTML趣味编程》《Java趣味编程》系列文章序号直达链接Tkinter1Python李峋同款可写字版跳动的爱心2Python跳动的双爱心3Python蓝色跳动的爱心4Python动漫烟花5Python粒子烟花Turtle1Python满屏飘字2Python蓝色流星雨3Python金色流星雨4Python漂浮爱心5Python爱心光波①6Py
  • HTML5(十二)——一文读懂 WebSocket 原理 m0_70646989 Web前端经验分享前端前端框架
    二、WebSocket通信过程================WebSocket协议可分为两部分：握手阶段和数据通信阶段。WebSocket为应用层协议，定义在TCP/IP协议栈之上，连接服务器的url是以ws或wss开头的。ws开头的默认TCP端口为80，wss开头的默认端口为443。ws（websocket）是不安全的，容易被窃听，只要别人知道你的ip和端口号，任何人都可以去连接通讯。wss（
  • 高效高并发调度架构 之群害马 架构
    以下是从架构层面为你提供的适合多核CPU、多GPU环境下API客户端、服务端高级调度，以实现高效并发大规模与用户交互的技术栈：通信协议gRPC：基于HTTP/2协议，具有高性能、低延迟的特点，支持二进制序列化（通常搭配Protobuf），非常适合高并发场景。它提供了流式通信和多路复用功能，可有效减少网络开销。常用于微服务之间的通信，例如机器学习模型服务与前端应用之间的交互。RSocket：是一种基
  • 大数据之-hdfs+hive+hbase+kudu+presto集群(6节点) 管哥的运维私房菜 大数据hdfshivekuduprestohbase
    几个主要软件的下载地址：prestohttps://prestosql.io/docs/current/index.htmlkudurpm包地址https://github.com/MartinWeindel/kudu-rpm/releaseshivehttp://mirror.bit.edu.cn/apache/hive/hdfshttp://archive.apache.org/dist/ha
  • 简析 .NET Core 构成体系 weixin_30613727 操作系统c#runtime
    简析.NETCore构成体系出处：http://www.cnblogs.com/vipyoumay/p/5613373.htmlhttps://github.com/PrismLibrary/Prism是一个用于在WPF，Windows10UWP和XamarinForms中构建松散耦合，可维护和可测试的XAML应用程序的框架。https://docs.microsoft.com/en-us/pre
  • Python爬虫获取股市数据，有哪些常用方法？ 股票程序化交易接口 量化交易股票API接口Python股票量化交易python爬虫股市数据网页抓取api股票量化接口股票API接口
    Python股票接口实现查询账户，提交订单，自动交易（1）Python股票程序交易接口查账，提交订单，自动交易（2）股票量化，Python炒股，CSDN交流社区>>>网页直接抓取法Python中有许多库可用于解析HTML页面来获取股市数据。例如BeautifulSoup，它能够轻松地从网页的HTML结构中提取出想要的数据。当我们定位到包含股市数据的网页时，利用BeautifulSoup可以根据HT
  • Python 爬虫实战：在东方财富网抓取股票行情数据，辅助投资决策 西攻城狮北 python爬虫实战案例东方财富网
    目录一、引言二、准备工作1.环境搭建2.获取目标网址三、分析网页结构1.查看HTML结构2.分析请求方式四、编写爬虫代码1.导入必要的库2.设置请求头3.获取股票行情数据4.保存数据到CSV文件5.主函数五、数据分析与可视化1.加载数据2.数据清洗3.数据分析4.数据可视化六、总结一、引言在金融投资领域，股票行情数据是投资者做出决策的重要依据。东方财富网作为国内领先的金融信息平台，提供了丰富的股票
  • Java 实现拖拽列表更新排序 架构师成长进阶空间 Javaspringcloudspringbootjava后端
    拖拽列表更新排序，接口提供给前端这个功能主要是需要的算法逻辑很多图解：如在前端页面上想把id=5拖拽到id=3上拖拽之后的效果：解析图例：代码示例：DevToCoding｜Java面试指南、学习笔记/***拖拽数据更新排序*@paramcurrentId当前数据id*@paramtargetId目标数据id*@return*/@RequestMapping("/sort/{currentId}/{
  • Flux架构及Redux实践 GbkMobile 架构
    随着前端应用的复杂性不断增加，有效管理应用状态和数据流变得至关重要。Flux架构及其最流行的实现之一Redux，为前端开发人员提供了一种可靠且可扩展的解决方案。本文将深入浅出地介绍Flux架构的核心概念，并通过实际的Redux实践示例来帮助读者更好地理解和应用这些概念。什么是Flux架构？Flux是一种前端应用架构模式，旨在解决传统MVC（Model-View-Controller）模式在大型应用
  • Flux架构：构建可预测的Web应用状态管理体系 阿珊和她的猫 架构前端
    前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。文章
  • 利用Python进行数据清洗与预处理：Pandas的高级用法 步入烟尘 python数据库开发语言
    本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以
  • Mac配置环境变量时终端显示bash-3.2解决方案 dearbaba_11 \N
    Mac配置环境变量时终端显示bash-3.2解决方案参考文章：（1）Mac配置环境变量时终端显示bash-3.2解决方案（2）https://www.cnblogs.com/jasmine0112/p/12285114.html备忘一下。
  • [失业前端恶补算法]JavaScript leetcode刷题top100（六）：字母异位词分组、最长连续序列、找到字符串中所有字母异位词、最大子数组和、除自身以外数组的乘积 摸鱼老萌新 失业前端恶补算法前端javascript动态规划算法哈希
    专栏声明：只求用最简单的，容易理解的方法通过，不求优化，不喜勿喷49.字母异位词分组题面给你一个字符串数组，请你将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。知识点：哈希表、排序思路这里用了js语言的一个小技巧，我们可以使用split这个api将字符串变成字符的数组，之后我们对得到的数组进行排序，这样字母异位词得到了结果字符串的一致的，
  • Java面试八股文：Memcached面试题专场（持续更新中......） Java凤梨 Java金三银四面试题memcachedjava面试
    全套Java金三银四面试题持续更新可文末自取，建议关注收藏不然下次找不到哟~目录1、Memcached是什么，有什么作用？memcached服务在企业集群架构中有哪些应用场景？一、作为数据库的前端缓存应用二、作业集群的session会话共享存储。2、Memcached服务分布式集群如何实现？3、Memcached服务特点及工作原理是什么？4、简述Memcached内存管理机制原理？SlabAllo
  • 高可用（HA）架构 weixin_34344403 运维系统架构java
    http://aokunsang.iteye.com/blog/2053719浅谈web应用的负载均衡、集群、高可用(HA)解决方案http://zhuanlan.51cto.com/art/201612/524201.htm互联网架构“高可用”http://www.blogjava.net/ivanwan/archive/2013/12/25/408014.htmlLVS/Nginx/HAPro
  • WEB漏洞-XXE&XML之利用检测绕过 网小白白 xmljavaphpweb网络安全
    XXE"xmlexternalentityinjection"-XML外部实体注入漏洞服务端接收和解析了来自用户端的xml数据,而又没有做严格的安全控制,从而导致xml外部实体注入xml基本语法XML被设计用来结构化、存储以及传输信息;恰恰相反,HTML是被设计用来显示数据，其焦点是数据的外观。XML没有预定义的标签。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理XML。XML不会做任何事情
  • 计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化 借口 热点资讯
    博客主页：借口的CSDN主页⏩文章专栏：《热点资讯》计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化计算机编程中的抽象语法树（AST）在代码分析和转换中的应用与优化引言抽象语法树概述定义历史背景核心特性简化复杂度提供统一接口支持多种操作应用场景编译器前端静态代码分析自动化测试框架源码美化工具成功案例分析ESLintRo
  • Git commit type 规范 老衲呢 Gitgit
    gitcommit提交规范提交规范：gitcommit-m“feat(新增暂停功能):新增执行推广任务暂停功能”详情请参考：阮雪峰的Commitmessage规范(点击可转跳)(https://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html)#主要typefeat:增加新功能fix:修复bug#特殊typedocs:只改
  • ASM系列四 利用Method 组件动态注入方法逻辑 lijingyao8206 字节码技术jvmAOP动态代理ASM
            这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇，知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道，同ClassVisitor改变类成员一样，MethodVIsistor如果需要改变方法成员，注入逻辑，也可以
  • java编程思想 --内部类 百合不是茶 java内部类匿名内部类
    内部类;了解外部类 并能与之通信 内部类写出来的代码更加整洁与优雅   1,内部类的创建  内部类是创建在类中的 package com.wj.InsideClass; /* * 内部类的创建 */ public class CreateInsideClass { public CreateInsideClass(
  • web.xml报错 crabdave web.xml
    web.xml报错   The content of element type "web-app" must match "(icon?,display-  name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s
  • 泛型类的自定义 麦田的设计者 javaandroid泛型
       为什么要定义泛型类，当类中要操作的引用数据类型不确定的时候。 采用泛型类，完成扩展。   例如有一个学生类     Student{ Student(){ System.out.println("I'm a student....."); } }  有一个老师类  
  • CSS清除浮动的4中方法 IT独行者 JavaScriptUIcss
    清除浮动这个问题，做前端的应该再熟悉不过了，咱是个新人，所以还是记个笔记，做个积累，努力学习向大神靠近。CSS清除浮动的方法网上一搜，大概有N多种，用过几种，说下个人感受。 1、结尾处加空div标签 clear:both 1 2 3 4 .div 1 { background : #000080 ; border : 1px   s
  • Cygwin使用windows的jdk 配置方法 _wy_ jdkwindowscygwin
    1.[vim /etc/profile]    JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43"  (windows下jdk路径为D:\Java\jdk1.6.0_43)    PATH="$JAVA_HOME/bin:${PATH}"    CLAS
  • linux下安装maven 无量 mavenlinux安装
    Linux下安装maven(转) 1.首先到Maven官网 下载安装文件，目前最新版本为3.0.3，下载文件为 apache-maven-3.0.3-bin.tar.gz，下载可以使用wget命令； 2.进入下载文件夹，找到下载的文件，运行如下命令解压 tar -xvf  apache-maven-2.2.1-bin.tar.gz 解压后的文件夹
  • tomcat的https 配置,syslog-ng配置 aichenglong tomcathttp跳转到httpssyslong-ng配置syslog配置
    1) tomcat配置https,以及http自动跳转到https的配置     1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令)      keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit
  • 关于领号活动总结 alafqq 活动
    关于某彩票活动的总结 具体需求，每个用户进活动页面，领取一个号码，1000中的一个； 活动要求 1，随机性，一定要有随机性； 2，最少中奖概率，如果注数为3200注，则最多中4注 3，效率问题，（不能每个人来都产生一个随机数，这样效率不高）； 4，支持断电（仍然从下一个开始），重启服务；（存数据库有点大材小用，因此不能存放在数据库） 解决方案 1，事先产生随机数1000个，并打
  • java数据结构 冒泡排序的遍历与排序 百合不是茶 java
    java的冒泡排序是一种简单的排序规则   冒泡排序的原理：           比较两个相邻的数，首先将最大的排在第一个，第二次比较第二个 ，此后一样；         针对所有的元素重复以上的步骤，除了最后一个     例题；将int array[]
  • JS检查输入框输入的是否是数字的一种校验方法 bijian1013 js
    如下是JS检查输入框输入的是否是数字的一种校验方法： <form method=post target="_blank"> 数字：<input type="text" name=num onkeypress="checkNum(this.form)"><br> </form>
  • Test注解的两个属性：expected和timeout bijian1013 javaJUnitexpectedtimeout
    JUnit4：Test文档中的解释： 　　The Test annotation supports two optional parameters. 　　The first, expected, declares that a test method should throw an exception. 　　If it doesn't throw an exception or if it
  • [Gson二]继承关系的POJO的反序列化 bit1129 POJO
    父类     package inheritance.test2; import java.util.Map; public class Model { private String field1; private String field2; private Map<String, String> infoMap
  • 【Spark八十四】Spark零碎知识点记录 bit1129 spark
    1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的 ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功，DAGScheduler会收到通知，在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中  
  • WAS各种脚本作用大全 ronin47 WAS 脚本
    　　　http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html 　　　无意中，在WAS官网上发现的各种脚本作用，感觉很有作用，先与各位分享一下 　　　 获取下载 这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自
  • java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句 bylijinnan switch
    借鉴网上的思路，用java实现： public class NoIfWhile { /** * @param args * * find x=1+2+3+....n */ public static void main(String[] args) { int n=10; int re=find(n); System.o
  • Netty源码学习-ObjectEncoder和ObjectDecoder bylijinnan javanetty
    Netty中传递对象的思路很直观： Netty中数据的传递是基于ChannelBuffer（也就是byte[]）； 那把对象序列化为字节流，就可以在Netty中传递对象了 相应的从ChannelBuffer恢复对象，就是反序列化的过程 Netty已经封装好ObjectEncoder和ObjectDecoder 先看ObjectEncoder ObjectEncoder是往外发送
  • spring 定时任务中cronExpression表达式含义 chicony cronExpression
    一个cron表达式有6个必选的元素和一个可选的元素，各个元素之间是以空格分隔的，从左至右，这些元素的含义如下表所示： 代表含义            是否必须 允许的取值范围         &nb
  • Nutz配置Jndi ctrain JNDI
    1、使用JNDI获取指定资源： var ioc = { dao : { type :"org.nutz.dao.impl.NutDao", args : [ {jndi :"jdbc/dataSource"} ] } } 以上方法,仅需要在容器中配置好数据源,注入到NutDao即可.
  • 解决 /bin/sh^M: bad interpreter: No such file or directory daizj shell
    在Linux中执行.sh脚本，异常/bin/sh^M: bad interpreter: No such file or directory。   分析：这是不同系统编码格式引起的：在windows系统中编辑的.sh文件可能有不可见字符，所以在Linux系统下执行会报以上异常信息。 解决： 1）在windows下转换： 利用一些编辑器如UltraEdit或EditPlus等工具
  • [转]for 循环为何可恨？ dcj3sjt126com 程序员读书
      Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案，要在Java将来的版本中加入闭包特征。 然而，提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。 不久前，出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨？”[http://ju
  • Android实用小技巧 dcj3sjt126com android
    1、去掉所有Activity界面的标题栏 　　修改AndroidManifest.xml 　　在application 标签中添加android:theme="@android:style/Theme.NoTitleBar"   2、去掉所有Activity界面的TitleBar 和StatusBar  　　修改AndroidManifes
  • Oracle 复习笔记之序列 eksliang Oracle 序列sequenceOracle sequence
    转载请出自出处：http://eksliang.iteye.com/blog/2098859 1.序列的作用 序列是用于生成唯一、连续序号的对象 一般用序列来充当数据库表的主键值 2.创建序列语法如下：   create sequence s_emp start with 1 --开始值 increment by 1 --増长值 maxval
  • 有“品”的程序员 gongmeitao 工作
    完美程序员的10种品质　　   完美程序员的每种品质都有一个范围，这个范围取决于具体的问题和背景。没有能解决所有问题的   完美程序员（至少在我们这个星球上），并且对于特定问题，完美程序员应该具有以下品质： 　　1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强   （范围：用简单方式解决复杂问题）　　
  • 使用KeleyiSQLHelper类进行分页查询 hvt sql.netC#asp.nethovertree
    本文适用于sql server单主键表或者视图进行分页查询，支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码：http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D
  • SVG 教程 （三）圆形，椭圆，直线 天梯梦 svg
    SVG <circle> SVG 圆形 - <circle> <circle> 标签可用来创建一个圆： 下面是SVG代码： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" c
  • 链表栈 luyulong java数据结构
    public class Node { private Object object; private Node next; public Node() { this.next = null; this.object = null; } public Object getObject() { return object; } public
  • 基础数据结构和算法十：2-3 search tree sunwinner Algorithm2-3 search tree
      Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga
  • spring配置定时任务 stunizhengjia springtimer
    最近因工作的需要，用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下，以便以后用到：     //------------------------定时任务调用的方法------------------------------ /** * 存储过程定时器 */ publi
  • ITeye 8月技术图书有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 8月试读活动回顾： http://webmaster.iteye.com/blog/2102830 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《跨终端Web》 gleams：http
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他