福州-司马懿
福州-司马懿

HTML5 drag drop


<html>
    <meta charset="utf8">
    <head>
        <style>
            body {
                font-size: 14px;
            }
            .dropBox {
                min-height: 50px;
            }
            ul, ol {
                margin: 0;
            }
            caption {
                font-size: 18px;
                font-weight: bold;
                text-align: left;
            }
            table {
                width: 100%;
                border: 1px solid black;
                margin-bottom: 10px;
                /* 将单元格之间的间距设为0 */
                border-spacing: 0;
            }
            table th, table td {
                border: 1px solid black;
                padding: 5px;
            }
            .readOnly {
                margin: 5px;
                padding: 3px;
                color: white;
                background-color: gray;
                border-radius: 5px;
                font-size: 10px;
                font-weight: bold;
            }
        style>
        <script>
            function onDropOver() {
                //默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
                event.preventDefault();
            }

            function onDrop() {
                if(event.type !== "drop") {
                    return;
                }
                //取消默认的处理方式
                event.preventDefault();
                //删除所有子元素
                event.target.innerHTML = "";
                var dt = event.dataTransfer;
                for(var i=0; ivar type = dt.types[i];
                    var data = event.dataTransfer.getData(type);
                    console.log(type);
                    console.log(data);
                    if(i != 0) {
                        event.target.innerHTML += "
"
                    }
                    //以下2种方式都是设置纯文本,无法换行
                    //event.target.textContent = data;
                    //event.target.appendChild(document.createTextNode(data));
                    event.target.innerHTML += (
                        "types.length = " + dt.types.length + "
" +
                        (i + 1) + ".type : " + type + "
 data : "
                    );
                    switch(type) {
                    case "Files":
                        event.target.innerHTML += ("file length = " + dt.files.length);
                        for(var j=0; jvar file = dt.files[j];
                            console.log(file);
                            event.target.innerHTML += ("
  " + j + ". " + file.name + ", 大小: " + file.size + "字节, 上次修改时间: " + new Date(file.lastModified) + ", 类型: " + file.type);
                        }
                        break;
                    default:
                        event.target.innerHTML += data;
                    }
                }
                console.log(dt);
            }

            function onDragStartEffect() {
                var dt = event.dataTransfer;
                //注意:数据类型最好小写,即使有大写字符也会被自动转为小写的
                dt.setData("dropEffect", event.srcElement.innerHTML);
                //effectAllowed默认是uninitialized,指定允许那种drop效果,如果只允许一种效果，那么不用设置dropEffect 就会自动使用该效果
                dt.effectAllowed = event.srcElement.innerHTML;
            }

            function onDragStartPlain() {
                event.dataTransfer.setData("text/plain", event.target.innerHTML);
            }

            function onDragStartLink() {
                var dt = event.dataTransfer;
                //目前还没找到传递多个uri的方法.因为注释前面的换行符会被转义,其它的被丢弃;使用其它字符来分割也差不多,注释前面的被转义,其它的保持不变
                //var urlList = ["http://www.example.com", "#A second link", "http://blog.csdn.net/chy555chy"].join("\n");
                //var urlList = ["http://www.example.com", "https://www.baidu.com", "http://blog.csdn.net/chy555chy"].join("\n");
                var urlList = "http://www.example.com";
                dt.setData("text/uri-list", urlList);
                dt.setData("text/plain", event.target.innerHTML);
            }

            function onDragStartHtml() {
                var dt = event.dataTransfer;
                dt.setData("text/html", "Hello there, stranger");
                dt.setData("text/plain", "Hello there, stranger");
            }

            function onDragStartCustom() {
                var dt = event.dataTransfer;
                //据我多次实验,setData会自动将非文本转化成文本
                dt.setData("custom", "custom");             
                //方法一:
                var img1 = document.getElementById("img");
                //设置拖动时显示的图像相对鼠标的位置
                dt.setDragImage(img1, 0, 0);
                /*
                //方法二:以下两种创建方式都是一样的
                var img2 = new Image();
                //var img2 = document.createElement("img");
                img2.src = "https://www.baidu.com/img/bd_logo1.png";
                //这里几种改变image大小的方法都是无效的
                img2.width = "50px";
                img2.height = "30px";
                img2.width = 50;
                img2.height = 30px";
                img2.style.width="50px";
                img2.style.height="30px";
                dt.setDragImage(img2, 0, 0);
                */
            }
        script>
    head>
    <body>
        <p>MDN dataTransfer part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/DataTransfera>p>
        <p>MDN event part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_APIa>p>
        <p>MDN effectAllowed part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAlloweda>p>
        <p>MDN drag type part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_typesa>p>
        <table>
            <caption>dataTransfer propertiescaption>
            <tr>
                <th>Propertytd>
                <th>Descriptiontd>
            tr>
            <tr>
                <td>dropEffecttd>
                <td>Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be none, copy, link or move.td>
            tr>
            <tr>
                <td>effectAllowedtd>
                <td>Provides all of the types of operations that are possible. Must be one of none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized.td>
            tr>
            <tr>
                <td>filestd>
                <td>Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.td>
            tr>
            <tr>
                <td>items<span class="readOnly">Read Onlyspan>td>
                <td>Gives a DataTransferItemList object which is a list of all of the drag data.td>
            tr>
            <tr>
                <td>types<span class="readOnly">Read Onlyspan>td>
                <td>An array of strings giving the formats that were set in the dragstart event.td>
            tr>
            <tr>
                <td>setDragImage(element, x, y)td>
                <td>Set the image to be used for dragging if a custom one is desired.td>
            tr>
            <tr>
                <td>clearData([format])td>
                <td>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.td>
            tr>
            <tr>
                <td>getData(format)td>
                <td>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.td>
            tr>
            <tr>
                <td>setData(format, data)td>
                <td>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.td>
            tr>
        table>

        <table>
             <caption>drag eventscaption>
            <tr>
                <th>Eventth>
                <th>On Event Handlerth>
                <th>Descriptionth>
            tr>
            <tr>
                <td>dragtd>
                <td>ondragtd>
                <td>Fired when an element or text selection is being dragged.td>
            tr>
            <tr>
                <td>dragendtd>
                <td>ondragendtd>
                <td>Fired when a drag operation is being ended (for example, by releasing a mouse button or hitting the escape key). (See Finishing a Drag.)td>
            tr>
            <tr>
                <td>dragentertd>
                <td>ondragentertd>
                <td>Fired when a dragged element or text selection enters a valid drop target. (See Specifying Drop Targets.)td>
            tr>
            <tr>
                <td>dragexittd>
                <td>ondragexittd>
                <td>Fired when an element is no longer the drag operation's immediate selection target.td>
            tr>
            <tr>
                <td>dragleavetd>
                <td>ondragleavetd>
                <td>Fired when a dragged element or text selection leaves a valid drop target.td>
            tr>
            <tr>
                <td>dragovertd>
                <td>ondragovertd>
                <td>Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).td>
            tr>
            <tr>
                <td>dragstarttd>
                <td>onddragstarttd>
                <td>Fired when the user starts dragging an element or text selection. (See Starting a Drag Operation.)td>
            tr>
            <tr>
                <td>droptd>
                <td>ondroptd>
                <td>Fired when an element or text selection is dropped on a valid drop target. (See Performing a Drop.)td>
            tr>
        table>
        <h2>effectAllowed & dropEffecth2>
        <ol>
            <li draggable="true" onDragStart="onDragStartEffect()">noneli>
            <li draggable="true" onDragStart="onDragStartEffect()">copyli>
            <li draggable="true" onDragStart="onDragStartEffect()">copyLinkli>
            <li draggable="true" onDragStart="onDragStartEffect()">copyMoveli>
            <li draggable="true" onDragStart="onDragStartEffect()">linkli>
            <li draggable="true" onDragStart="onDragStartEffect()">linkMoveli>
            <li draggable="true" onDragStart="onDragStartEffect()">moveli>
            <li draggable="true" onDragStart="onDragStartEffect()">allli>
            <li draggable="true" onDragStart="onDragStartEffect()">uninitializedli>
        ol>
        <fieldset>
            <legend>Drop Boxlegend>
            
            <div class="dropBox" draggable="false" onDragOver="onDropOver()" onDrop="onDrop()">div>
        fieldset>
        <h2>transfer typeh2>
        <ol>
            <li draggable="true" onDragStart="onDragStartPlain()">拖拽文本(Dragging Text)li>
            <li draggable="true" onDragStart="onDragStartLink()">拖拽链接(Dragging Links)li>
            <li draggable="true" onDragStart="onDragStartHtml()">拖拽HTML与XML(Dragging HTML and XML)li>
            <li>拖拽文件(Dragging Files)li>
            <li>拖拽图片(Dragging Images)<img id="img" width="50" height="30" src="https://www.baidu.com/img/bd_logo1.png">li>
            <li>拖拽节点(Dragging Nodes)li>
            <li draggable="true" onDragStart="onDragStartCustom()">拖拽自定义数据(Dragging Custom Data)li>
            <li>拖拽文件到一个操作系统文件夹(Dragging files to an operating system folder)li>
        ol>
        <fieldset>
            <legend>Drop Boxlegend>
            <div class="dropBox" draggable="false" onDragOver="onDropOver()" onDrop="onDrop()">div>
        fieldset>
    body>
html>

HTML5 drag drop_第1张图片

你可能感兴趣的:(html5,drag,drop,HTML5)

  • 常用 SQL 语句摘录 未来无限 C#Winform设计
    语句功能--数据操作SELECT--从数据库表中检索数据行和列INSERT--向数据库表添加新数据行DELETE--从数据库表中删除数据行UPDATE--更新数据库表中的数据--数据定义CREATETABLE--创建一个数据库表DROPTABLE--从数据库中删除表ALTERTABLE--修改数据库表结构CREATEVIEW--创建一个视图DROPVIEW--从数据库中删除视图CREATEINDE
  • html5及css有什么区别,html5和css3的区别是什么？ weixin_39788256 html5及css有什么区别
    html5和css3是什么？区别是什么？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。什么是HTML5？HTML，超文本标记语言(HyperTextMarkupLanguage)，标准通用标记语言下的一个应用。是用于描述网页文档的一种标记语言。html5是HTML第五次重大修改后的版本，是当前最新版本，主要特点是支持原生的视频播放、离线存储、更多的语义
  • 一文讲透HTML语义化标签
    文章目录语义化标签概述HTML标签及其含义常见HTML5语义化标签语义化标签对搜索引擎（SEO）的影响提升搜索引擎排名增强可访问性改善用户体验语义化标签案例各标签作用说明语义化标签概述HTML语义化是指使用恰当的标签来准确表达内容的结构和含义，使网页不仅对人类开发者可读，也能被搜索引擎、辅助技术等更好地理解和处理。例如，用表示页眉，表示独立内容区块，提升页面可访问性和SEO效果。HTML标签及其含
  • 如何区别HTML和HTML5？ 代码的余温 htmlhtml5前端
    要区分HTML（通常指HTML4及更早版本）和HTML5，主要可以从以下关键方面进行比较：一、文档声明区别二、语义化标签对比用途HTML4标签HTML5新标签头部区域导航栏内容区块独立文章侧边栏页脚主要内容区✅HTML5通过语义化标签取代了泛滥的，提升可读性和SEO三、多媒体支持差异四、图形技术演进constctx=document.getElementById('myCanvas').getCo
  • Strawberry、Graphene还是Ariadne：谁才是FastAPI中GraphQL的最佳拍档？ qcidyu 文章归档fastapigraphqlpython
    url:/posts/f4ba34abe80a510080bb8b97f5cc92a8/title:Strawberry、Graphene还是Ariadne：谁才是FastAPI中GraphQL的最佳拍档？date:2025-07-18T03:57:51+08:00lastmod:2025-07-18T03:57:51+08:00author:cmdragonsummary:GraphQL在Fas
  • wap页面和html5,WAP网站、3G网站、html5触屏版有什么区别？
    目前手机上的网站主要就分为WAP格式和3G格式，从脚本语言来讲，我们通常喜欢说用WML开发的网站就是WAP网站，用XHTML开发的网上3G网站。WML是当初专门为2.5G时代开发的一个脚本，他的功能挺简单的，页面形式呢主要是文字居多，因为那个时候的网速带宽还有机型的限制，所以WAP网站不能用CSS，字体颜色也只有普通文字的黑色和链接文字的蓝色，至于页面背景什么的是不能设置的。3G网站，也就是我们所
  • html5这什么意思,html5是什么意思？html5和html的区别介绍 wiles super html5这什么意思
    一、HTML5是什么？HTML5是HyperTextMarkupLanguage5的缩写，HTML5是超文本标记语言的最新版本，也就是描述网页的代码，html5实际上是三种代码形式，首先是HTML提供结构，其次是层叠样式表(CSS)负责网站的样式和布局，最后是JavaScript是给网站添加动态功能。二、html5和html的区别1、定义上区别HTML5是应用超文本标记语言(HTML)的第五次修改
  • HTML和HTML5的区别 半生凉忆 htmlhtml5
    HTML和HTML5的区别什么是HTML？HTML全称为超文本标记语言(HyperTextMarkupLanguage)，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。什么是HTML5?HTML5是HTML的第五个版本，HTML5已经远远超越了标记语言的范畴，它的设计目的是在移动设备上支持多媒体，和HTML比起来，深度和广度上都做了进一步
  • 如何在HTML5页面中嵌入视频
    在HTML5中嵌入视频主要使用标签，这是一种简单且标准的方式。以下是详细步骤和示例：基础实现视频嵌入示例您的浏览器不支持HTML5视频标签。核心属性说明controls添加播放控件（播放/暂停、进度条、音量等）width和height设置播放器尺寸（单位：像素）标签提供多个视频格式源以提高兼容性（浏览器会选择第一个支持的格式）：MP4(H.264)-兼容性最好WebM-开源格式，Chrome/Fi
  • Web开发 02 im_AMBER 前端学习
    今天梳理出的HTML+CSS核心知识点，涵盖基础结构、布局、样式优化等实用技巧：总结1一、HTML核心知识1.基础结构文档声明：定义文档为HTML5标准。基本标签：：根元素，包裹整个页面。：元数据（标题、样式、脚本等），不显示在页面。：设置网页标题（浏览器标签显示）。：页面内容容器，所有可见内容写在这里。2.常用标签文本与标题：~：标题标签，自动加粗且有默认层级样式。：段落标签，默认有上下边距。图
  • HTML+CSS+JS binzhenliziyuan javascripthtmlcss
    HTML+CSS+JSHTML基础1.HTML文件中的DOCTYPE是什么作用？2.HTML、XML、XHTML之间有什么区别？3.前缀为data-开头的元素属性是什么？4.谈谈你对HTML语义化的理解？5.HTML5对比HTML4有哪些不同之处？6.meta标签有哪些常用用法？7.img标签的srcset的作用是什么？8.响应式图片处理优化:Picture标签9.在script标签上使用defe
  • HTML与HTML5知识点复习整理 bottle Shen html前端
    **本篇文章食用的简单说明**本篇文章为复习HTML与HTML5进行了知识点梳理，其中标题六部分涉及CSS知识（有标注），加粗部分为重点！！！加粗加红为重重点！！！如有遗漏欢迎在评论区补充~推荐大家按记忆梳理部分的内容自行回忆知识点，如有遗忘部分在左下方目录处点击相应部分可以进行跳转。又是努力学习前端的一天，希望大家共同进步~~~（QAQ我只是一个表情）❤***记忆梳理***一、HTML是什么二、
  • HTML快速复习
    目录!DOCTYPE声明头部head标题title标记元信息meta标记主体body标题分割线段落加粗倾斜下划线文字加删除线预编译标签换行实体字符多媒体标签超链接设置锚点列表标签表格标签框架框架集合form表单模拟百度搜索表单元素文本框密码框单选按钮多选按钮文件隐藏域普通按钮特殊按钮下拉列表多行文本框label标签提交按钮HTML5新增的一些type类型HTML5新增的一些属性thisismyfi
  • 关于uniapp中的拖拽图片排序，类似发布朋友圈功能的组件学习 一路向前的月光 jsuniappuni-app学习
    仅供学习记录和帮作者shm***@163.com推广一下他的插件如果侵权请联系我进行文章删除图片拖拽排序-DCloud插件市场GitHub-shmilyany/shmily-drag-image:uni-app图片拖拽排序插件一、项目背景在uniapp中编写类似发布朋友圈功能时候需要用户可以自己决定上传图片的顺序二、基本功能组件movable-area可拖动区域由于app和小程序的架构是逻辑层与视
  • 【深度学习基础】PyTorch中model.eval()与with torch.no_grad()以及detach的区别与联系？
    目录1.核心功能对比2.使用场景对比3.区别与联系4.典型代码示例(1)模型评估阶段(2)GAN训练中的判别器更新(3)提取中间特征5.关键区别总结6.常见问题与解决方案(1)问题：推理阶段显存爆掉(2)问题：Dropout/BatchNorm行为异常(3)问题：中间张量意外参与梯度计算7.最佳实践8.总结以下是PyTorch中model.eval()、withtorch.no_grad()和.d
  • 育儿之路我一直坚持几件事... 欢_喜磕到底
    每个妈妈都有自己的育儿理念，也有自己坚持做的事情。我的第一件最最坚持的事情就是：阅读DragonMaster不管是老大老二老三出生，从我有一点时间开始，我就坚持给他们读书，一直读，一直读，读到他们可以自己完全独立自主阅读的阶段。目前最欣慰的就是三个娃每天都会读书，睡前阅读一定是少不了的，而我最喜欢做的事情就是不停地买书给他们，现在我们家的情况是所到之处都有书柜，随手可取。而我也是随时有空就拿着书，
  • Anime.js 超级炫酷的网页动画库详解 伍哥的传说 前端源码分享javascript开发语言ecmascriptanime.jstimelineanimate
    简介Anime.js是一个轻量级的JavaScript动画库，它提供了简单而强大的API来创建各种复杂的动画效果。以下是Anime.js的主要使用方法和特性：安装npminstallanimejs示例基本用法import{animate,createScope,createSpring,createDraggable}from"animejs";import{useEffect,useRef,us
  • 解决errCode = 2, detailMessage = Table[xx]‘s state is not NORMAL. Do not allow doing ALTER报错 胡八一、 报错解决doris数据库
    test_table正处于“后台作业执行中”状态（不是NORMAL），所以FE拒绝新的ALTERTABLE/CREATEMATERIALIZEDVIEW等DDL。要继续操作，必须先让表回到NORMAL。请按下面步骤排查并处理。1、找出到底在跑什么任务--列变更（ADD/DROPCOLUMN、修改键等）SHOWALTERTABLECOLUMNWHERETableName='test_table';-
  • vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能 吃西瓜不吐籽_ vue.js前端javascript
    最近有这样一个需求，将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件，第一个我就想到通过is来实现，分享下我的思路及部分代码供大家参考。先看下大概布局：如图通过上方的组件拖拽的配置卡片来进行动态渲染组件，拖拽用了draggable插件，这样拖拽后直接传数据即可首先先看拖动卡片的部分代码（切换多个个性布局及如何默认展示，是否有配置过布局没有则怎么展示这些逻辑
  • 深度学习——CNN（3） 飘涯
    前言：前面介绍了最基本的Lenet，下面介绍几种其他的网络结构CNN-AlexNet网络结构如下图：从图中可以看出，采用双gpu训练增加LRN归一化层：本质上，这个层也是为了防止激活函数的饱和的。采用dropout防止过拟合基于AlexNet进行微调，诞生了ZF-netCNN-GoogleNetGoogLeNet借鉴了NIN的特性，在原先的卷积过程中附加了11的卷积核加上ReLU激活。这不仅仅提升
  • InnoDB引擎B+树索引使用和新特性 蜜獾互联网 MySqlb树数据结构
    B+树索引的管理我们在InnoDB引擎中常用的索引基本都是B+树索引。创建和删除索引它的创建和删除有两种方法：#方式一：altertable,此时index和key均可以，如果要求所有值均不重复，加上uniquealtertabletbl_nameadd[unique]index|keyindex_name(index_col_name,...);altertabletbl_namedropind
  • Firefox浏览器Flash及音乐播放插件使用指南 酷毙的我啊
    本文还有配套的精品资源，点击获取简介：随着Firefox逐步淘汰原生FlashPlayer支持，依赖于Flash的内容和某些网页音乐的播放需求催生了特定插件的开发。尽管HTML5已取代Flash成为网页多媒体的核心，教育和娱乐领域的某些旧内容仍然需要使用Flash。用户可以通过安装类似Ruffle这样的Flash模拟器来播放Flash内容，同时，专为Firefox设计的音乐插件如Enhancerf
  • 禁止拖动视频进度条来保障视频安全？ 菜包eo 教育视频polyv视频安全音视频安全
    文章目录前言一、何为禁止拖动视频进度条？二、禁止拖动视频进度条的实现原理三、如何实现禁止拖动视频进度条总结前言在知识付费与企业培训场景中，视频内容安全是核心诉求。学员随意拖动进度条可能导致关键知识点遗漏，甚至助长盗录行为。本文深入解析HTML5播放器禁止拖拽进度条的技术方案，通过精准控制播放行为保障学习效果与内容安全。以企业培训、在线教育为例，探讨如何借助技术手段平衡用户体验与内容防护，为开发者提
  • LocalSend：比 AirDrop 更自由！这款神器让文件传输不再受限 开源项目精选 https
    LocalSend是一款免费、开源的跨平台文件传输工具，支持Windows、macOS、Linux、Android和iOS等主流操作系统。它通过HTTPS实现端到端加密传输，无需互联网或外部服务器，即可在局域网内高速、安全地传输文件和文本。其核心优势在于打破平台壁垒，提供高效安全的本地文件共享方案，让您的多设备互联互通变得前所未有的简单。Stars数64,423Forks数3,437主要特点跨平台
  • 第二篇 html5和css3开发基础与应用 ᝰ落念英 html5css3前端开发语言webhtmlcss
    第一章html5开发基础与应用第一节简介2014年10月28日，W3C组织公开发布HTML5标准规范。官方文档地址为：https://www.w3.org/TR/2014/REC-html5-20141028/HTML5.1文档地址：https://www.w3.org/TR/2015/WD-html51-20151008/HTML5.2文档地址：https://www.w3.org/TR/201
  • 精通Canvas：15款时钟特效代码实现指南 烟幕缭绕
    本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提
  • 入门html这篇文章就够了 ξ流ぁ星ぷ132 html前端
    HTML笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签，预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签：HTML5中的语义标签：特殊字符img标签a标签第一种用法：超链接第二种用法：锚点video标签表格标签：form标签input标签selec
  • 【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（Advanced RAG[1]）基于历史对话重新生成Query？ 985小水博一枚呀 AI大模型学习路线人工智能学习langchainRAG
    【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）基于历史对话重新生成Query？【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）基于历史对话重新生成Query？文章目录【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）基于历史对话重新生成Q
  • 【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（Advanced RAG[1]）其他Query优化相关策略？ 985小水博一枚呀 AI大模型学习路线人工智能学习langchain
    【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）其他Query优化相关策略？【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）其他Query优化相关策略？文章目录【AI大模型学习路线】第三阶段之RAG与LangChain——第十六章（AdvancedRAG[1]）其他Query优化相关策略？一
  • 低温冷启动 & 高温热启动 hahaha6016 fpga开发
    低温冷启动1.在低温下，晶体管的阈值电压可能升高，导致时序路径变慢，从而可能引起建立时间（setuptime）违规。另外，也可能出现保持时间（holdtime）违规，因为低温下信号传播速度可能变快（但通常低温下延迟增加，所以建立时间问题更常见）。2.droppinglogiccore意味着在低温下某个逻辑核心（可能是一个特定的模块或IP核）无法正常启动或工作，导致功能失效3.cellname，这通
  • 遍历dom 并且存储（将每一层的DOM元素存在数组中） 换个号韩国红果果 JavaScripthtml
    数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
  • Android+Jquery Mobile学习系列(9)-总结和代码分享 白糖_ JQuery Mobile
    目录导航   经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。   个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
  • impala参考资料 dayutianfei impala
    记录一些有用的Impala资料   1. 入门资料 >>官网翻译：     http://my.oschina.net/weiqingbin/blog?catalog=423691   2. 实用进阶 >>代码&架构分析：     Impala/Hive现状分析与前景展望：http
  • JAVA 静态变量与非静态变量初始化顺序之新解 周凡杨 java静态非静态顺序
    今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
  • 跳出iframe返回外层页面 g21121 iframe
    在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。 首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
  • JAVA多线程监听JMS、MQ队列 510888780 java多线程
    背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。 对于上面提到的方法2使用一个监听器开启多线
  • 第一个SpringMvc例子 布衣凌宇 spring mvc
    第一步：导入需要的包； 第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
  • 我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
    PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
  • 通过XSD验证XML antlove xmlschemaxsdvalidationSchemaFactory
    1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
  • 文本流与字符集 百合不是茶 PrintWrite()的使用字符集名字 别名获取
    文本数据的输入输出;           输入;数据流,缓冲流         输出;介绍向文本打印格式化的输出PrintWrite();   package 文本流; import java.io.FileNotFound
  • ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
            正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
  • java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 javajvmjdb
            用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。         现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
  • 【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
    在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
  • cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
        由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
  • 动态页面正文部分中文乱码排障一例 ronin47
    公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。 不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。 因为有做过系统调整，所以第一反应就是新上
  • java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
    import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
  • 从100PV到1亿级PV网站架构演变 cfyme 网站架构
    一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的 架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
  • [宇宙时代]宇宙时代的GIS是什么？ comsci Gis
           我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的          宇宙是一个高维时空
  • 详解create database命令 czmmiao database
    完整命令 CREATE DATABASE mynewdb   USER SYS IDENTIFIED BY sys_password   USER SYSTEM IDENTIFIED BY system_password   LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
  • 几句不中听却不得不认可的话 datageek
    1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
  • 1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
    原文地址：http://www.kafka0102.com/2010/08/281.html   因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
  • xcode6 Auto layout and size classes dcj3sjt126com ios
    官方GUI   https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html   iOS中使用自动布局（一）   http://www.cocoachina.com/ind
  • 通过PreparedStatement批量执行sql语句【sql语句相同，值不同】 梦见x光 sql事务批量执行
    比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) {    String sql = "inseret into customer(id
  • 程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
    一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear   二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
  • NGINX IXHONG nginx
    pcre 编译安装 nginx conf/vhost/test.conf   upstream admin { server 127.0.0.1:8080; }   server {                 listen       80; &
  • 设计模式--工厂模式 kerryg 设计模式
    工厂方式模式分为三种：   1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。   2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。   3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
  • Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd javaspringbeanxml
    1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。 通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
  • 解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centosvim
    有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？ 答案是肯定的，设置下缩进格式就可以了，非常简单： 在用户的根目录下 直接vi  ~/.vimrc文件 然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
  • netty大并发请求问题 tianzhihehe netty
    多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
  • Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
    我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。 我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。 经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他