16.12  使用拖拽的方式在相簿中对照片进行排序

16.12 使用拖拽的方式在相簿中对照片进行排序

本实例的功能是,在相册中对照片进行排序。在具体实现过程中,需要先设计三个相簿框区域,然后在下面罗列显示12幅不同的图片,用户可以使用拖拽的方式将图片放在不同的相簿中。

978-7-111-53392-4-Part04-269.jpg

实例文件12.html的实现代码如下。

978-7-111-53392-4-Part04-270.jpg

978-7-111-53392-4-Part04-271.jpg

JavaScript文件js12.js的代码如下。

978-7-111-53392-4-Part04-272.jpg

978-7-111-53392-4-Part04-273.jpg

执行后先在页面上方显示3个相簿框,下方显示12幅图片,如图16-14所示。

978-7-111-53392-4-Part04-274.jpg

图16-14 执行效果

用户可以用拖拽的方式将下方的12幅图片放在上方的相簿中,如图16-15所示。

978-7-111-53392-4-Part04-275.jpg

图16-15 执行效果