模仿淘宝上传图片之后在图片中单击按钮?
2015-09-24 10:50
387 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="upload.css"> </head> <body> <ul class="upload inline-control" id="sortable"> <li class="pic0"> <img src="img/1.jpg" id="cart-0"> <div class="operate"> <i class="toleft">左移</i> <i class="toright">右移</i> <i class="del" data-id="0">删除</i> </div> </li> <li class="pic1"> <img src="img/2.jpg" id="cart-1"> <div class="operate"> <i class="toleft">左移</i> <i class="toright">右移</i> <i class="del" data-id="1">删除</i> </div> </li> <li class="pic2"> <img src="img/3.jpg" id="cart-2"> <div class="operate"> <i class="toleft">左移</i> <i class="toright">右移</i> <i class="del" data-id="2">删除</i> </div> </li> <li class="pic3"> <img src="img/4.jpg" id="cart-3"> <div class="operate"> <i class="toleft">左移</i> <i class="toright">右移</i> <i class="del" data-id="3">删除</i> </div> </li> <li class="pic4"> <img src="img/5.jpg" id="cart-4"> <div class="operate"> <i class="toleft">左移</i> <i class="toright">右移</i> <i class="del" data-id="4">删除</i> </div> </li> </ul> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.js"></script> <script> </script> <script> $(".toright").click(function(){ var id=$(this).parent().parent().index(); move(id,id+1); }); $(".toleft").click(function(){ var id=$(this).parent().parent().index(); move(id,id-1); }); $(".del").click(function(){ $("#cart-"+$(this).data('id')).remove() }); function move(from,to){ if(to>4 || to<0) return; // $("div#view").html("<hr>"+from+"=>"+to+"<br>"); var tmp=$("#cart-"+to).attr('src'); var img=$("#cart-"+from).attr('src'); $("#cart-"+to).attr('src',img); $("#cart-"+from).attr('src',tmp); } </script> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); //拖动排序的序号怎么返回值是如何传给后台的? }); </script> </body> </html>
相关文章推荐
- java数组获取最值
- STL学习系列之一——标准模板库STL介绍
- MSSQL 判断实例中是否存在某种表
- Javascript学习(一)——汉诺塔迭代算法的实现过程
- 在Tomcat 6下运行正常,但是在Tomcat 7下异常。
- Gdi+与双缓冲的图片显示(应用篇)
- 开发中遇到libc++abi.dylib: terminate_handler unexpectedly threw an exception错误
- Swift编程规范:保持代码优美的10个方法
- 牛X素材推荐之TriangleRectangleLabelView
- CSS中常用到的清除浮动
- 使用docker-compose快速安装redmine
- 单链表的若干操作
- [oracle学习笔记]之一:sql/plus基础操作
- 匿名内部类
- 牛X素材推荐之TriangleRectangleLabelView
- [转]NMON服务器监控、指标说明
- avalon js实现仿google plus图片多张拖动排序附源码下载
- 从a站点跳转到b站点,通过url的参数判断是否让该用户选择身份
- java生成pdf报表
- 【4】Windows客户端C/C++编程规范“建议”——表达式和运算