首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML5拖拽

@(HTML5)[HTML 5拖拽] HTML 5 拖拽事件 图片自带拖拽功能 其他元素可设置draggable属性:draggable :true 拖拽元素(被拖拽的元素)事件 : ondragstart...: 拖拽的一瞬间触发 ondrag : 拖拽前、拖拽结束之间,连续触发 ondragend : 拖拽结束触发 目标元素(拖拽元素被拖到的地方)事件 : ondragenter...> drag -> dragenter -> dragover -> dragleave -> drop -> dragend 火狐下的兼容 火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签..., link, linkMove, move, all 和 uninitialized) setDragImage : 三个参数(指定的元素,坐标X,坐标Y) files: 获取外部拖拽的文件...,返回一个filesList列表 filesList下有个type属性,返回文件的类型 FileReader(读取文件信息) readAsDataURL 参数为要读取的文件对象 onload当读取文件成功完成的时候触发此事件

3.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML5 拖拽上传图片实例

    因为标题写的是实例,所以本次就不做讲解了,因为这个实例我也算是东拼西凑整出来的,参考了大概5、6款拖拽上传的插件和demo,然后把其中好的地方挑出来,最后就成了这么一个实例,一起来看下吧(地址不能保证长久有效...dropupload.html   界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传...它很巧妙的把三种上传模式整合到了一起,而且你可以用IE浏览器浏览下,如果不支持HTML5,是没有拖拽上传图片的提示的,如图:   拖拽上传最重要的就是js部分的代码,它实现了70%的功能,另外30%仅仅是把图片信息提交到后台...document.getElementById('target_box'); box.addEventListener("drop",function(e){ e.preventDefault(); //获取文件列表...主要实现代码是从“功能实现”开始的,这块具体为何这样操作,原理是什么,我就不多说了,大家可以参考下这篇文章:《人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata

    2.7K30

    使用React DnD实现列表拖拽排序

    本文作者:IMWeb howenhuo 原文出处:IMWeb社区 未经同意,禁止转载 概述 项目中需要对列表实现拖拽排序,同时要支持点击选中和删除功能。 ?...主要实现以下功能: 鼠标hover到【列表项】,显示可【拖动图标】; 抓取【拖动图标】并拖动,【列表项】跟随鼠标; 拖动过程【其他列表项】自行挪动; 拖动到目标位置,释放鼠标,完成排序; 由于项目使用...,hover 列表项显示操作按钮,点击列表项可以选中。...react-dnd-html5-backend # Using yarn yarn add react-dnd react-dnd-html5-backend 这里 react-dnd-html5-backend 是使用 HTML5...详细用法请参考 React DnD 文档 或 react-dnd 用法详解 实现列表拖拽排序 components/DndList.js import React, { useState } from

    9.6K41

    彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现

    一、基于鼠标事件的拖拽 原理——onmousedown、onmousemove、onmouseup onmousedown 该事件会在鼠标按键被按下时触发 支持该事件的HTML标签: , <...解决方案 只需要实时计算拖拽的元素边框距离上下左右屏幕之间的距离就行了,具体代码如下: code: <!...至此使用鼠标事件的拖拽大功告成!...---- 二、基于HTML5拖拽API的拖拽 前序知识介绍   一个典型的拖拽操作是这样的:用户用鼠标选中一个可拖动的(draggable)元素,移动鼠标到一个可放置的(droppable)元素,然后释放鼠标...当用户开始拖动一个元素或选中的文本时触发 drop ondrop 当元素或选中的文本在可释放目标上被释放时触发 ps:当从操作系统向浏览器中拖动文件时,不会触发dragstart 和dragend 事件 接口: HTML5

    3.3K30

    Android实现可拖拽列表和多选功能

    本文实例为大家分享了Android实现可拖拽列表和多选的具体代码,供大家参考,具体内容如下 这是我已经完成的一个已经上线的OA软件的一个模块,这个模块的功能不多,已经放到GitHub上面开源了,有感兴趣的朋友可以看看...(clsOnlineReportList); mAdapter.notifyDataSetChanged(); } private void initView() { title.setText("可拖拽列表...protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) { //当详情页的数据有变动则刷新列表...void refreshData() { Toast.makeText(mContext, "在此处调用接口", Toast.LENGTH_SHORT).show(); } } 适配器代码 /** * 可拖拽列表的适配器...public interface Callback { void onClick(View v, int position); } } 需要实现的接口 /** * 用来完成RecyclerView长按拖拽的关键接口

    1.6K20

    【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    为什么学习HTML5? 咳咳, 回到主题,为什么我们要学HTML5呢?...1.了解HTML5的囊括范围的一大好处是:当你不小心使用了一个H5的东东的时候(例如你试图通过百度找到的答案解决一个紧张的需求),你会很及时的关注它的兼容性 2.H5有些新增的特性也许你从没接触过,也感觉无需用到它...如何使得被拖拽元素可拖拽?(因为元素默认的行为是不可拖拽的),以及如何使得被放置的容器元素可放置?...appendChild之类的API实现添加被拖拽的元素,从而模拟整个拖拽的过程 也就是说, 拖拽其实可分为三个过程: 拖动—传递被拖动元素的数据(如id)—在容器元素中添加该元素 关键在于如何在被拖动元素和被放置元素中传递数据...拖拽后 ? 参考资料: HTML5-MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5 【完】

    3.1K30

    【javascript】谈谈HTML5—Web Worker+canvas+indexedDB+拖拽事件

    为什么学习HTML5? 咳咳, 回到主题,为什么我们要学HTML5呢?...1.了解HTML5的囊括范围的一大好处是:当你不小心使用了一个H5的东东的时候(例如你试图通过百度找到的答案解决一个紧张的需求),你会很及时的关注它的兼容性 2.H5有些新增的特性也许你从没接触过,也感觉无需用到它...如何使得被拖拽元素可拖拽?(因为元素默认的行为是不可拖拽的),以及如何使得被放置的容器元素可放置?...appendChild之类的API实现添加被拖拽的元素,从而模拟整个拖拽的过程 也就是说, 拖拽其实可分为三个过程: 拖动—传递被拖动元素的数据(如id)—在容器元素中添加该元素 关键在于如何在被拖动元素和被放置元素中传递数据...拖拽后 ? 参考资料: HTML5-MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5 【完】 ?

    3.7K100

    html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1、点击屏幕下方签到悬浮按钮; 2、弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是没找到点击按钮可以向两边贴边的拖拽...代码如下: 1 $(function(){ 2 3 //签到按钮拖拽 4 //首先,设置cookie值,使到不同的页面刷新拖拽的按钮位置不会变 5 function setCookie(name...,targetTouches是当前DOM上的手指列表,所以当手指移开触发touchend事件时,event.originalEvent是没有这个targetTouches列表的,而changedTouches...列表是涉及当前事件的列表,例如touchend事件中,手指移开。...touchend事件中应该是只有个changedTouches触摸实例列表的。 参考链接:原生js完美拖拽,每次刷新可以记住上次拖拽的位置

    4.2K50

    HT for Web列表和3D拓扑组件的拖拽应用

    很多可视化编辑器都或多或少有一些拖拽功能,比如从一个List列表拖拽一个节点到拓扑组件上进行建模,并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图,那么今天我们就来实现这样的拖拽效果。...首先我们需要创建一个List列表,在列表中加入图片信息,让List列表不那么单调,先来看看效果图。 ?...接下来我们一步一步来是想这个List列表,先来解决下数据,在这里我就列举一两个: var products = [ { ProductId : 1, ProductName...在prepare状态时获取当前拖拽节点的ProductId属性,并通过调用ht.Default.toCanvas()方法将当前拖拽节点结合矢量productIcon获得一个canvas对象; 2....在end状态时,如果当前鼠标位置在某个图元表面时,就将当前拖拽节点的对应的图片做为当前图元表面的贴图。

    1.1K60

    HT for Web列表和3D拓扑组件的拖拽应用

    很多可视化编辑器都或多或少有一些拖拽功能,比如从一个List列表拖拽一个节点到拓扑组件上进行建模,并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图,那么今天我们就来实现这样的拖拽效果。...首先我们需要创建一个List列表,在列表中加入图片信息,让List列表不那么单调,先来看看效果图。 ?...接下来我们一步一步来是想这个List列表,先来解决下数据,在这里我就列举一两个: var products = [     {         ProductId : 1,         ProductName...在prepare状态时获取当前拖拽节点的ProductId属性,并通过调用ht.Default.toCanvas()方法将当前拖拽节点结合矢量productIcon获得一个canvas对象; 2....在end状态时,如果当前鼠标位置在某个图元表面时,就将当前拖拽节点的对应的图片做为当前图元表面的贴图。

    82920

    android ItemTouchHelper实现可拖拽和侧滑的列表的示例代码

    实现功能: 按住 item 左侧的按钮可以上下拖动 item 向右侧滑删除 item item 拖动或侧滑时有阴影效果 实现基本功能 循序渐进学习,这里我们先实现基本的功能: 长按 item 实现上下拖拽...这是一个给 RecyclerView 添加侧滑删除和拖拽的工具类。有了它,我们就可以很方便的实现上面的效果。...onMove() 当 item 想要上下拖拽时会调用此方法。 onSwiped 当 item 想要左右侧滑时会调用此方法。...完善 我们实现的的基本效果与文章开头给出的效果还是有一点差距的,还需要实现的效果: 通过按住 item 左边按钮才能上下拖拽。 侧滑或拖拽时被操作的 item Z轴高度增加,有明显的阴影。...isLongPressDragEnabled() { //禁止长按item可以上下拖拽,因为我们要自定义开启拖拽的时机 return false; } 其次新建一个OnStartDragListener

    1.4K11
    领券