jquery应用-图片拖拽排序
最近在研究Interface elements for jQuery（http://interface.eyecon.ro/），此插件封装了一些拖拽效果，并且使用非常简单，能轻松实现拖拽排序、购物车、博客首页排版等UI，所以模仿和讯的图片排序做了一个简单样例：
预览：
代码：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Sortables demo - Interface plugin for jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="interface.js"></script>
<style type="text/css" media="all">
body
{
background: #fff; height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt;
}#sort1{ width: 350px; height: 200px;}div img { float: left; width: 60px; height: 60px; margin:10px; border:solid 3px #ccc;}.sorthelper{ background-color: #f5f5f5; float: left; border:4px solid #ccc;}.sortableactive{}.sortablehover{
}</style></head><body><div id="sort1"> <img src="1.jpg" class="sortableitem" id="1" alt="1"/> <img src="2.jpg" class="sortableitem" id="2" alt="2"/> <img src="3.jpg" class="sortableitem" id="3" alt="3"/> <img src="4.jpg" class="sortableitem" id="4" alt="4"/> <img src="5.jpg" class="sortableitem" id="5" alt="5"/> <img src="6.jpg" class="sortableitem" id="6" alt="6"/></div><div class="serializer"><a href="#" onClick="serialize(); return false;" >提交排序</a></div><script type="text/javascript">$(document).ready( function () { $('#sort1').Sortable( { accept : 'sortableitem', //拖拽元素class名 helperclass : 'sorthelper', //拖拽时投放位置的样式 activeclass : 'sortableactive', //拖拽时悬空时class hoverclass : 'sortablehover', //拖拽时经过时class opacity: 0.5, //拖拽时透明度 fx: 200, //拖拽时回位速度 revert: true, floats: true, tolerance: 'pointer', onchange: changedata //拖拽状态改变时触发事件 } ) });function changedata(){}function serialize(s){ serial = $.SortSerialize(s); alert(serial.hash.replace(/&sort1\[\]=/g,",").replace("sort1[]=","")); /*这里可使用jquery form插件ajax提交 （http://www.malsup.com/jquery/form/#code-samples） 使用也非常方便 */};</script> </body></html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义