`

分享一个HTML5的drag and drop API实现的图片拖拽分组效果

    博客分类:
  • HTML
阅读更多

日期:2012-4-17  来源:GBin1.com

分享一个HTML5的drag drop API实现的图片拖拽分组效果

在线演示   本地下载

今 天我们介绍HTML5的拖拽功能。基本目前所有的现代浏览器(Firefox,Chrome,Safari,或者Opera)都支持这个实用的功能。这意 味着我们可以考虑在我们的项目和网站中使用这个功能。更重要的是代码编写非常简单。我们这里将使用拖拽API开发一个图片的分组排序功能 ,希望能够给大家比较直观的使用感受。希望大家喜欢!

HTML标签

<div class="albums">
    <div class="album" id="drop_1" droppable="true"><h2>Album 1</h2></div>
    <div class="album" id="drop_2" droppable="true"><h2>Album 1</h2></div>
    <div class="album" id="drop_3" droppable="true"><h2>Album 3</h2></div>
</div>
<div style="clear:both"></div>
<div class="gallery">
    <a id="1" draggable="true"><img src="images/1.jpg"></a>
    <a id="2" draggable="true"><img src="images/2.jpg"></a>
    <a id="3" draggable="true"><img src="images/3.jpg"></a>
    <a id="4" draggable="true"><img src="images/4.jpg"></a>
    <a id="5" draggable="true"><img src="images/5.jpg"></a>
    <a id="6" draggable="true"><img src="images/6.jpg"></a>
    <a id="7" draggable="true"><img src="images/7.jpg"></a>
    <a id="8" draggable="true"><img src="images/8.jpg"></a>
    <a id="9" draggable="true"><img src="images/9.jpg"></a>
    <a id="10" draggable="true"><img src="images/10.jpg"></a>
    <a id="11" draggable="true"><img src="images/11.jpg"></a>
    <a id="12" draggable="true"><img src="images/12.jpg"></a>
</div>
<script src="js/main.js"></script>

你可以看到这里我们设定了3个开放的drop对象和12个图片。我们将可drop的区域使用属性droppable来标示,并且将可drag的对象用draggable来标示。

...

 

来源:分享一个HTML5的drag and drop API实现的图片拖拽分组效果

分享到:
评论

相关推荐

    基于HTML5 拖拽接口(Drag and drag-and-drop interfaces based on HTML5

    HTML5是现代网页开发的重要标准,它引入了许多新特性,其中拖放(Drag and Drop)功能就是一项增强用户交互体验的重要接口。拖放接口允许用户通过鼠标或触控设备将元素从一个位置拖动到另一个位置,使得网页的互动性...

    jquery 实现Drag and drop的例子

    本篇文章将深入探讨如何使用jQuery实现拖放(Drag and Drop)功能,特别是针对图片的拖放操作。拖放功能是网页交互中常见的一种增强用户体验的方式,常用于文件上传、页面元素排序等场景。 首先,我们需要引入jQuery...

    拖拽 Draganddrop.html

    标题 "拖拽 Draganddrop.html" 暗示着这个压缩包包含了一个关于HTML5拖放功能(Drag and Drop)的实例代码。HTML5的拖放API为网页开发者提供了在浏览器内部或跨页面移动元素的能力,这是一个强大的交互设计工具,常...

    Drag and Drop Shopping Cart using JQuery.zip

    本项目“Drag and Drop Shopping Cart using JQuery.zip”利用JavaScript的jQuery库,实现了一个可拖放的购物车功能,这在电子商务网站中非常常见且实用。jQuery是JavaScript的一个轻量级库,它简化了DOM操作、事件...

    HTML5程序设计-3期(KC014) 拓展-图片拖拽分组.docx

    在提供的文档内容中,我们可以看到一个实现这一功能的JavaScript代码片段,它涉及到HTML5的拖放API(Drag and Drop API)。以下是这个功能的具体实现步骤和相关知识点的详细解释: 1. **选择可拖放元素**: `...

    突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述

    HTML5中的拖放(Drag and Drop)功能是一个强大的交互特性,允许用户抓取网页上的元素并将其移动到其他位置,从而实现数据交换或界面布局的调整。这一特性在各种应用场景中都非常常见,如文件管理、图像编辑、网页...

    仿微信朋友圈图片拖拽排序 wx-drag-sort.rar

    综上所述,“仿微信朋友圈图片拖拽排序 wx-drag-sort.rar”项目是一个集成了HTML5拖放API、微信小程序组件化开发、数据管理和动画效果的实例,旨在提供类似微信朋友圈的图片排序体验。通过学习和实践这个项目,...

    HTML5+Three.js实现可拖拽的3D卡通森林效果源码.zip

    这个项目的实现涉及到了HTML5的Canvas、WebGL、Drag and Drop API等多个技术,对于学习Web前端开发特别是3D图形编程的开发者来说,是一个很好的实践案例。通过研究和分析这个源码,可以深入理解如何将HTML5与Three....

    仿微信朋友圈图片拖拽排序

    拖拽排序通常涉及到HTML5的Drag and Drop API,这是一个浏览器内置的API,允许用户通过鼠标操作元素进行拖放。在微信小程序中,由于无法直接使用DOM,我们需要借助微信小程序的自定义组件和事件系统来模拟这一过程。...

    react-fileupload:react版本的图片上传,支持拖拽和删除,用来复习Drag,Drop,File,XHR2

    在React开发中,实现一个图片上传功能是常见的需求,`react-fileupload` 是一个专为此目的设计的组件库。这个库充分利用了React的组件化特性,提供了选择、拖拽、删除以及预览图片的功能,极大地提高了用户体验。接...

    html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽等

    其中,拖放(Drag and Drop)功能是HTML5的一项重要特性,允许用户通过手势操作来移动元素,如图片和标签,极大地提高了交互性。本资源集合包含了针对移动端的HTML5拖放插件及其演示示例(demo),适用于手机网址...

    html5图片拖拽

    HTML5图片拖拽功能是现代网页开发中的一个有趣特性,它允许用户通过鼠标或触摸设备直接在页面上拖动图像。这个技术主要依赖于HTML5的`drag`和`drop`事件,以及相关的API,如`DataTransfer`对象。下面我们将深入探讨...

    html5拖拽图片调整截图代码.zip

    HTML5的Drag and Drop API为开发者提供了在网页上实现拖放功能的接口。通过设置`draggable`属性为`true`,任何HTML元素都可以被拖动。同时,`dragstart`, `drag`, `dragenter`, `dragleave`, `dragover` 和 `drop`...

    JS实现列表图片拖拽排序效果特效源码.zip

    1. **HTML5 Drag and Drop API**:此API是实现拖拽功能的基础,提供了`dragstart`、`drag`、`dragend`、`dragenter`、`dragleave`和`drop`等事件,用于监听拖放过程中的各个阶段。 2. **添加拖动标识**:在图片元素...

    bootstrap图片拖拽上传

    图片拖拽上传功能是利用HTML5的`Drag and Drop API`来实现的。这个API允许用户通过拖放操作与网页元素进行交互,例如将本地文件拖放到网页指定区域进行上传。同时,`FormData`对象用于存储上传的文件数据,以便通过...

    HTML5 CSS3 :无插件拖拽上传图片实例源码

    在这个"HTML5 CSS3:无插件拖拽上传图片实例源码"中,我们重点关注的是利用HTML5的拖放(Drag and Drop)API以及File API来实现图片的无插件上传功能。这种技术使得用户可以通过直接在页面上拖动文件到指定区域,...

    拖拽图片的文本框

    这是基于HTML5的Drag and Drop API实现的,允许用户通过鼠标或触屏操作直接将本地文件从桌面或其他位置拖入网页元素中。在我们的场景中,这个元素就是文本框。开发者需要监听`dragenter`、`dragleave`、`dragover`和...

    js图片拖拽效果制作列表图片拖拽排序代码

    在JavaScript编程中,实现图片拖拽效果以及列表图片的拖拽排序是一项常见且实用的技术。这一功能常用于创建用户友好的交互式应用,比如在线相册、任务管理器或者自定义布局的界面。本篇文章将深入探讨如何使用...

    html5 js拖拽图片超弹性特效

    这个"html5 js拖拽图片超弹性特效"是一个利用HTML5的拖放API和JavaScript实现的交互式图片展示技术。下面将详细阐述这一技术的核心知识点。 首先,HTML5的拖放API允许用户通过鼠标或触摸设备直接操作页面元素,实现...

    图片拖拽改变顺序

    首先,实现图片拖拽功能的核心技术是HTML5中的`Drag and Drop` API。这个API允许开发者创建可拖动的元素,并定义它们的拖放行为。在网页中,我们可以将每个图片元素(例如`&lt;img&gt;`标签)设置为可拖动,通过添加`...

Global site tag (gtag.js) - Google Analytics