博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【开发小技巧】32—如何利用HTML、CSS和jQueryUI创建拖放功能以对图像进行重新排序?...
阅读量:4118 次
发布时间:2019-05-25

本文共 1619 字,大约阅读时间需要 5 分钟。

来源 | https://www.geeksforgeeks.org/

给定一个图像库,要求通过拖放来重新排列列表或网格中图像的顺序。jQuery UI框架提供了sortable()函数,该函数有助于通过使用鼠标对列表项进行重新排序。使用此功能,列表项可以互换。

jQuery UI提供具有默认可拖动属性的sortable()函数。HTML文档中的所有列表元素都是可以互换的,并可以重新排序以进行显示。

用户可以借助鼠标将元素拖放到新位置。其他元素会自行调整以适合列表。

首先,我们需要创建一个基本的图片库,在其中我们将执行拖放功能以对图片库列表进行重新排序。包括所需的jQuery UI链接和库。

  • 包括所有必需的jQuery和jQuery UI库,代码如下:

HTML代码:

                How to create drag and drop         features for images reorder         using HTML CSS and jQueryUI?            

GeeksforGeeks

Drag and drop using jQuery UI Sortable
Output of ID's of images :

CSS代码:

最后,我们通过添加JavaScript代码来添加拖放功能。

JS代码:

最后,我们将整合以上所有的代码,然后,在其中执行拖放操作以对图库中的图像进行重新排序。

  • 最终代码如下:

               How to create drag and drop         features for images reorder         using HTML CSS and jQueryUI?          
         

GeeksforGeeks

Drag and drop using jQuery UI Sortable
Output of ID's of images :

最终输出效果:

本文完~

转载地址:http://yobpi.baihongyu.com/

你可能感兴趣的文章
application/x-www-form-urlencoded、multipart/form-data、text/plain
查看>>
关于Content-Length
查看>>
WebRequest post读取源码
查看>>
使用TcpClient可避免HttpWebRequest的常见错误
查看>>
EntityFramework 学习之一 —— 模型概述与环境搭建 .
查看>>
C# 发HTTP请求
查看>>
启动 LocalDB 和连接到 LocalDB
查看>>
Palindrome Number --回文整数
查看>>
Reverse Integer--反转整数
查看>>
Container With Most Water --装最多水的容器(重)
查看>>
Longest Common Prefix -最长公共前缀
查看>>
Letter Combinations of a Phone Number
查看>>
Single Number II --出现一次的数(重)
查看>>
Valid Parentheses --括号匹配
查看>>
Remove Element--原地移除重复元素
查看>>
Remove Duplicates from Sorted Array--从有序数组中移除重复元素
查看>>
Count and Say
查看>>
Gas Station
查看>>
Palindrome Partitioning --回文切割 深搜(重重)
查看>>
Valid Palindrome 简单的回文判断
查看>>