日期:2012-4-17 来源:GBin1.com
在线演示
本地下载
今
天我们介绍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实现的图片拖拽分组效果
分享到:
相关推荐
jquery实现Drag and Drop,图片拖拽实例
Java中的Drag and Drop拖拽技术
最近写项目的时候,要用到一个拖拽效果,但是,所以写了一个例子上传到这里,交流学习
Qt之QToolButton与QGroupBox实现动态拖拽Drag、Drop功能,可以随意拖放到QGroupBox内,也可以与现有的QToolButton交换位置,也可以拖拽出QGroupBox外释放
dragAndDrop- iOS11拖拽的使用方法
swift-dragAndDrop-iOS11拖拽的使用方法.zip
表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7 最新0.7版本
Ole Drag and Drop Example.
drag and drop 拖放库 vue dnd mobile
html div drag/drop 拖拽实现 cookie记录位置用于构建灵活的个人门户等
Drag and Drop Component Suite Version 5.2 Full Source
DragAndDrop_Demo源码,是一个很不错的C++源码,有兴趣的伙伴们抽时间可以看一下把。
DragAndDrop_src源码,是一个很不错的C++源码,有兴趣的伙伴们抽时间可以看一下把。
C#实现和windows资源管理器之间相互拖拽文件,并显示文件图标的列子。可以访问blog:http://blog.csdn.net/cc_net查看有关Drag和Drop的文章
基于html5 drag api实现的vue树形拖拽组件
看了书上写了这个系统提供的拖拽操作(StartDrag),然后自己尝试多次未能成功,然后又在百度找了很多文章,发现都不尽相同,之后自己总结之后写出了这个demo,希望能够帮到和我之前遇到同样问题的朋友
java swing控件的drag和drop的实现方法: 主要用到java.awt.dnd.*;里面的方法,可以实现任意2个component的drag and drop.
wpf,实现了鼠标拖放操作,可以像win7桌面的图标一样拖放
DragAndDrop Android的拖拽实例
前端项目-angular-drag-and-drop-lists,Angular directives for sorting nested lists using the HTML5 Drag and Drop API