精华内容
下载资源
问答
  • 主要介绍了HTML5 拖拽复制功能的实现的相关资料,需要的朋友可以参考下
  • 具体代码如下所示:   <!--代码如下,最下面给出了我测试用的9张250*250的图片切片-->...drag拖拽</title> <style> .box{ float: left; } img{ width: 150px; height:150px; } #puzzle{
  • 这是一款非常有趣的HTML5拖拽互动修改页面元素颜色特效。该特效在页面的左边有一个颜色工具栏,用户可以拖动上面的颜色到右边的页面区域或文字上,这些区域或文字的颜色就会被修改为用户拖动的颜色。
  • HTML5拖拽

    2018-12-06 13:56:20
    HTML5拖拽上传 本片基于Chrome浏览器 设置可拖拽 Chrome浏览器中使用draggable=true来实现拖拽 &lt;div id="div1" draggable="true"&gt;拖拽当前元素&lt;/div&gt; 一、拖拽...

    HTML5拖拽上传

    本片基于Chrome浏览器

    设置可拖拽

    Chrome浏览器中使用draggable=true来实现拖拽

    <div id="div1" draggable="true">拖拽当前元素</div>
    

    一、拖拽事件

    拖拽事件目标分两类:被拖拽元素目标元素

    1.被拖拽元素

    拖拽事件触发的顺序如下:

    1. ondragstart : 拖拽的一瞬间触发
    2. ondrag : 拖拽期间连续触发
    3. ondragend : 拖拽结束触发
    2.目标元素

    目标元素事件触发的顺序如下:

    1. ondragenter : 进入目标元素触发
    2. ondragover : 在目标元素内部持续触发
    3. ondragleave/ondrop(两者触发其一) : 离开目标元素触发,在目标元素上释放鼠标触发

    注意:默认状态下,一个元素不能放另一元素的上面,需要在ondragover事件里面阻止默认事件

    demo:网址——————————————————

    遇到问题:为何ondrop事件无法触发?

    答:有些元素默认不允许放置,无法触发ondrop事件,需要重写dragenter和dragover的默认行为。

    二、dataTransfer对象(数据转换)

    dataTransfer是事件对象的一个属性,用于从被拖动元素向目标元素传递字符串形式的数据

    主要方法有setData,getdata两个方法设置数据和接受数据。

    setData 接受两个参数,第一个参数是字符串,表示保存的数据类型,第二个参数是数据内容。

    getData 接受一个参数,与setData的第一个参数一样。

    支持MIME类型的(IE10一下不支持)MIME

    保存在dataTransfer对象中的数据智能在drop事件处理程序中读取。

    e.dataTransfer.setData("text","文本");
    var text = e.dataTransfer.getData("text");
    e.dataTransfer.setData("URL","http://www.baidu.com/");
    var url = e.dataTransfer.getData("URL");
    

    自定义放置目标

    有的时候我们拖动的元素放置在无效的目标上的时候是不会产生任何效果的,因为这些元素默认是不允许放置的,如果拖动元素经过不允许放置的元素是不会触发drop事件的。

    可以将任何元素变成有效的放置目标的方法:重写dragenter和,dragover的默认行为。

    div2.addEventListener("dragenter", function (e) {
        e.preventDefault();
    });
    div2.addEventListener("dragover", function (e) {
        e.preventDefault();
    });
    

    属性

    DataTransfer.dropEffect

    获取当前所选拖放操作的类型,或将拖拽操作设置为新类型。值必须为none,copy,link或move中的一个。

    不同的dropEffect属性值,鼠标的手形就会有不一样的表现

    dropEffect属性的设置主要用在dragenter和dragover事件中,同时受effectAllowed属性影响。

    DataTransfer.effectAllowed
    提供可能的所有类型的操作。必须是none,copy,copyLink,copyMove,link,linkMove,move,all或uninitialized中的一个。

    demo:
    github

    展开全文
  • html5之前,网页当中实现拖拽要借助到js中的 (onmousedown+onmousemove),现在html5内部就支持了拖拽的功能,结合js能够极大的方便我们实现拖拽 功能,但是此功能仅能支持有限的几款浏览器。 2.html5拖拽实现 ...

    1.前言

    html5 之前,网页当中实现拖拽要借助到 js 中的 (onmousedown+onmousemove),现在 html5 内部就支持了拖拽的功能,结合js 能够极大的方便我们实现拖拽 功能,但是此功能仅能支持有限的几款浏览器。

    2.html5拖拽实现

    ①当拖拽对象进入投放区的时候会触发相关的事件
        A.dragenter :当拖拽对象进入投放区时触发;
        B.dragover :拖拽对象在投放区内移动时触发;
        C.dragleave :拖拽对象没有投放到投放区,离开投放区的 时候触发;
        D.drop :拖拽对象投放在投放区时触发。
    ②注意: dragenter dragover 可能会受到默认事件的影 响,所以我们在这两个事件当中使用           e.preventDefault();来阻止事件默认事件

    3.实现效果图

     4.html,创建两个盒子

    <body>
    <div id="box">
    </div>
    <ul id="con">
    	<li>java</li>
    	<li>js</li>
    	<li>html5</li>
    	<li>css3</li>
    </ul>
    </body>

    5.css

    <style>
     #box{
      width:200px;
      height:200px;
      border:1px solid red;
     }
     #con{
    	width:200px;
    	height:200px;
    	border:1px solid blue;
    	list-style:none;
    	padding:0;margin:0;
     }
     li{
    	width:150px;
    	height:30px;
    	margin:5px 0;
    	background:#ccc;
    	line-height:30px;
    	text-align:center;
    	list-style:none;
     }
    </style>

    6.js动态拖拽核心代码

    <script>
      window.onload=function  () {
       var box=document.getElementById("box");
       var con=document.getElementById("con");
       var lis=document.getElementsByTagName("li");
       for (var i=0; i<lis.length; i++) {
        lis[i].draggable=true;
    	lis[i].flag=false;
    	lis[i].ondragstart=function  () {
    	 this.flag=true;
    	}
    	lis[i].ondragend=function  () {
    	 this.flag=false;
    	}
       }
    
       box.ondragenter=function  (e) {
         e.preventDefault();
       }
       box.ondragover=function  (e) {
         e.preventDefault();
       }
       box.ondragleave=function  (e) {
         e.preventDefault();
       }
       box.ondrop=function  (e) {
         for (var i=0; i<lis.length; i++) {
    	   if(lis[i].flag){
    	     box.appendChild(lis[i]);
    	   }
         }
         e.preventDefault();
       }
    
    
      con.ondragenter=function  (e) {
         e.preventDefault();
       }
       con.ondragover=function  (e) {
         e.preventDefault();
       }
       con.ondragleave=function  (e) {
         e.preventDefault();
       }
       con.ondrop=function  (e) {
         for (var i=0; i<lis.length; i++) {
    	   if(lis[i].flag){
    	     con.appendChild(lis[i]);
    	   }
         }
         e.preventDefault();
       }
      }
    </script>

    展开全文
  • 在学习使用拖动事件的时候,发现不管设置 draggable 为 true 还是 false,元素都可以被拖动.代码如下drag#draggable {width: 200px;height: 20px;text-align: center;background: white;}.dropzone {width: 200px;...

    在学习使用拖动事件的时候,发现不管设置 draggable 为 true 还是 false,元素都可以被拖动.

    代码如下

    drag

    #draggable {

    width: 200px;

    height: 20px;

    text-align: center;

    background: white;

    }

    .dropzone {

    width: 200px;

    height: 20px;

    background: blueviolet;

    margin-bottom: 10px;

    padding: 10px;

    }

    This div is draggable

    var dragged

    document.addEventListener("drag", function (event) {

    }, false)

    document.addEventListener("dragstart", function (event) {

    dragged = event.target

    event.target.style.opacity = .5

    }, false)

    document.addEventListener("dragend", function (event) {

    event.target.style.opacity = ""

    }, false)

    document.addEventListener("dragover", function (event) {

    event.preventDefault()

    }, false)

    document.addEventListener("dragenter", function (event) {

    if (event.target.className == "dropzone") {

    event.target.style.background = "purple"

    }

    }, false)

    document.addEventListener("dragleave", function (event) {

    if (event.target.className == "dropzone") {

    event.target.style.background = ""

    }

    }, false)

    document.addEventListener("drop", function (event) {

    event.preventDefault()

    if (event.target.className == "dropzone") {

    event.target.style.background = ""

    dragged.parentNode.removeChild(dragged)

    event.target.appendChild(dragged)

    }

    }, false)

    想要实现的功能是能够将文字 "这是可以拖动的" 在不同的 div 容器中进行拖动.功能是可以实现,效果如图所示

    bVbhMwv?w=267&h=217

    但问题是不知道为什么 div 容器也可以被拖动,就算设置了 draggable = 'false' 也不能够解决

    div class="dropzone " draggable="false">

    这是可以拖动的

    展开全文
  • 主要介绍了HTML5 拖拽批量上传文件的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • html5 拖拽交换

    2017-04-27 13:14:13
    html5 拖拽交换
  • HTML5拖拽的简单实例

    2020-09-28 00:16:49
    下面小编就为大家带来一篇HTML5拖拽的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 使用HTML5拖拽文件到浏览器并实现文件上传下载,html5的功能是越来越强大了,下面与大家分享下具体的实现代码,感兴趣的朋友可以参考下哈
  • HTML5拖拽效果Demo

    2021-05-01 14:55:33
    HTML5+JS实现的拖拽效果Demo,是通过简单的几句JS代码及可实现将对象从一个容器拖拽到另外一个容器,请用谷歌浏览器或火狐浏览器查看效果。
  • HTML5拖拽功能drag

    2021-06-28 12:54:44
    1.创建拖拽对象给需要拖拽的元素设置draggable属性,它有三个值:true:元素可以被拖拽;false:元素不能被拖拽;auto: 浏览器自己判断元素是否能被拖拽。2.处理拖拽事件当我们拖拽对象的时候会触发拖拽事件包括:A...

    1.创建拖拽对象

    给需要拖拽的元素设置draggable属性,它有三个值:

    true:元素可以被拖拽;

    false:元素不能被拖拽;

    auto: 浏览器自己判断元素是否能被拖拽。

    2.处理拖拽事件

    当我们拖拽对象的时候会触发拖拽事件包括:

    A.dragstart:当元素拖拽开始触发;

    B.drag:在元素拖拽过程中触发;

    C.dragend:元素拖拽结束时触发

    3.创建投放区

    ①当拖拽对象进入投放区的时候会触发相关的事件

    A.dragenter:当拖拽对象进入投放区时触发; B.dragover:拖拽对象在投放区内移动时触发; C.dragleave:拖拽对象没有投放到投放区,离开投放区的 时候触发;

    D.drop:拖拽对象投放在投放区时触发。

    ②注意:dragenter、dragover可能会受到默认事件的影 响,所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件

    4.使用dataTransfer传递数据

    当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法:

    1.types:返回数据的格式; 2.getData():返回指定格式数据; 3.setData(, ):设置指定格式数据;

    4.clearData():移除指定格式数据; 5.files:返回已经投放的文件的信息数组。 1.type:文件类型

    2.size:文件大小

    3.name:文件名

    编程实例:

    div{

    width: 200px;

    height: 200px;

    border: 1px solid red;

    margin:30px;

    float: left;

    }

    img{

    width: 200px;

    height: 200px;

    }

    s3.jpg

    function drag(e){

    e.dataTransfer.setData("Text", e.target.id);

    }

    function drop(e){

    var data= e.dataTransfer.getData("Text")

    e.target.appendChild(document.getElementById(data));

    e.preventDefault();

    }

    function allowDrag(e){

    e.preventDefault();

    }

    HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

    HTML5拖拽&sol;拖放&lpar;drag &amp&semi; drop&rpar;详解

    H5中拖拽属性: draggable: auto | true | false   拖动事件:   - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...

    HTML5 拖拽功能

    本地文件拖动到页面实例:(支持IE)

    RCP:拖拽功能的实现 Drag and Drop

    SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...

    Atitit。D&amp&semi;D drag&amp&semi;drop拖拽功能c&num;&period;net java swing的对比与实现总结

    Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...

    html5中的拖拽功能

    拖拽元素支持的事件 ondrag 应用于拖拽元素,整个拖拽过程都会调用 ondragstart 应用于拖拽元素,当拖拽开始时调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用 on ...

    Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

    JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

    HTML5 拖拽实现

    简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...

    随机推荐

    sizzle分析记录:分解流程

    Name: ...

    Android 关于&OpenCurlyDoubleQuote;NetworkOnMainThreadException”

    网络收集的原因如下,以及解决办法: 我补充总结一下: 解决办法一:在操作网络类(socket连接)的activity的protected void onCreate(Bundle savedInsta ...

    Python 提示 no module named win32api

    Windows下运行Python程序 提示错误  说是没有win32api的模块 解决办法 : 安装pywin32对应于Python的版本  可从https://sourceforge.net/pro ...

    2、使用Struts2实现登录功能(没有连接数据)

    1.创建如下的目录结构 2.在com.entity包下创建 package com.entity; /** * 用户类 * @author Holly老师 * */ public class User ...

    beautifulSoup基本用法及find选择器

    总结来源于官方文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html#find-all 示例代码段 html_do ...

    ftp删除目录和文件,目录下有文件删除提示【550 Remove directory operation failed&period;】

    注意:目录下有文件,直接删除目录会失败,提示550 Remove directory operation failed. 必须先将目录下的文件都删除,才能删除目录   ftp命令行: ftp删除目 ...

    项目引入非配置的文件,打成war包后测试报错的可能原因

    写在前边 这阵子有点忙,开发一个微服务项目中读取配置文件的时候在本地测试是可以的,但是一到测试环境就报错,经查看发现是因为发布的时候是用的war包,使用java -jar xxx.war启动的,所以用 ...

    FreeMarker使用小记&lpar;HelloWorld&rpar;

    FreeMarker是开源的模板框架.对于它的介绍网上已经很多了.详情可参考主页:http://www.freemarker.org/ 现在我们就开始我们的FreeMarker版的Hello Worl ...

    Android应用安全防护和逆向分析 ——apk混淆成其他语言代码

    现在很多人对于app的安全是越来越重视了,尤其是金融相关的行业,对于app的防范可是下足了功夫.各种加固,各种加密算法,层出不穷.我个人觉得,在安全技术这块,没有绝对安全的.也许今天这个技术起到了防范 ...

    SpringMVC笔记——Spring&plus;MyBatis组合开发简单实例

    简介 SSH框架很强大,适合大型项目开发.但学无止境,多学会一门框架组合开发会让自己增值许多. SSM框架小巧精致,适合中小型项目快速开发,对于新手来说也是简单上手的.在SSM框架搭建之前,我们先学习 ...

    展开全文
  • 下面通过代码给大家介绍html5拖拽应用记录,具体代码如下所示:e.dataTransfer.setData("a","设置的值");e.dataTransfer.getData("a");function drop(e){e.dataTransfer.setData("a", e.target.id);}拖动元素被拖动...
  • 拖拽上传最重要的就是js部分的代码,它实现了70%的功能,另外30%仅仅是把图片信息提交到后台,然后做对应的处理,比如压缩啊,裁剪啊云云,感兴趣的朋友可以参考下哈,希望可以帮助到你
  • 1. HTML5 拖拽 1.1 相关知识 拖拽元素:可以为元素添加 draggable=true来让元素能够被拖拽拖拽元素的事件监听:(应用于拖拽元素) ondragstart当拖拽开始时调用 ondragleave 当鼠标离开拖拽元素时调用 ...
  • html5拖拽图片调整截图代码是一款基于html5实现的拖拽图片调整大小编辑头像截图代码。
  • html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布,可以通过鼠标前后拖拽图片。当点击图片...
  • 拖拽API是HTML5的新特性,相对于其他新特性来说,重要程度占到6成。这篇文章通过经典案例给大家介绍了HTML5拖拽API的知识要点,需要的朋友参考下吧
  • HTML5拖拽上传图片预览提交代码是一款能够写评论拖拽上传图片特效。
  • DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
  • HTML5拖拽,draggable='true',目前只有Firefox、Google、Safari支持。
  • html5拖拽图片调整截图代码是一款基于html5实现的拖拽图片调整大小编辑头像截图代码。
  • html5拖拽图片调整截图代码是一款基于html5实现的拖拽图片调整大小编辑头像截图代码。
  • html5表格行的拖拽

    2015-03-08 22:27:52
    这是一个用HTML5实现表格拖拽对的小例子
  • 主要为大家详细介绍了JS HTML5拖拽上传图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 225,230
精华内容 90,092
关键字:

html5拖动

友情链接: avaya_mib.zip