利用jquery ui sortable对图片移动并进行排序

最新推荐文章于 2023-01-16 10:32:13 发布

weixin_33695450

最新推荐文章于 2023-01-16 10:32:13 发布

阅读量166

点赞数

文章标签： ui javascript 数据库 ViewUI

原文链接：https://my.oschina.net/wuzhaohui/blog/112951

版权

2019独角兽企业重金招聘Python工程师标准>>>

今天在工作中，设计部提出一个需求，即图片可以拖动并且可以排序，经过考量之后我觉得用jquery实现比较合适，因为jquery的ui库比较全，通过查看我选择了sortable这个插件来实现对图片拖动和排序

一下是实践代码

<!doctype html>  <html lang="en">
 <head> <meta charset="utf-8" />  <title>jQuery UI Sortable - Display as grid</title>  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; } #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px;height: 90px; font-size: 4em; text-align: center; } </style>  <script>  $(function(){
    //初始化是对象可以sort      
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
    //获取移动前li的id编号序列 var b = $( "#sortable" ).sortable( 'toArray');
    当出发sort的stop事件后所需执行的程序
    $( "#sortable" ).sortable({stop: function(event, ui) {
            var a = $( "#sortable" ).sortable( 'toArray');
            if(a.toString()!=b.toString())
              for(var i in a){                  alert((i)+","+a[i]);  };
            }      
     });  }); </script> </head> <body> <ul id="sortable">  <li class="ui-state-default" id=1>1</li>  <li class="ui-state-default" id=2>2</li>  <li class="ui-state-default" id=3>3</li> <li class="ui-state-default" id=4>4</li> <li class="ui-state-default" id=5>5</li>         <li class="ui-state-default" id=6>6</li>          <li class="ui-state-default" id=7>7</li>          <li class="ui-state-default" id=8>8</li>         <li class="ui-state-default" id=9>9</li>          <li class="ui-state-default" id=10>10</li>         <li class="ui-state-default" id=11>11</li>         <li class="ui-state-default" id=12>12</li>      </ul> </body> </html>
最后通过ajax程序可以将新序更新到数据库

转载于:https://my.oschina.net/wuzhaohui/blog/112951