python + ajax 实现拖动功能

这些日子写了一个机房中添加机柜的功能，需要实现机柜自由拖动，然后保存数据库。

html代码

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="utf-8" />
  5     <title>机房视图</title>
  6     <link rel="stylesheet" href="/js/jquery-ui/themes/base/jquery-ui.min.css" />
  7     <script src="/js/jquery-1.6.2.min.js"></script>
  8     <script src="/js/jquery-ui/ui/jquery-ui.min.js"></script>
  9     <script src="/js/jquery.json-2.4.js"></script>
 10 
 11     <style>
 12     .draggable {
 13         font-size:12px;
 14         display:block;
 15         width: 30px;
 16         height: 30px;
 17         float: left;
 18         position: absolute;
 19         text-align: center;
 20         line-height: 30px;
 21         cursor: pointer;
 22     }
 23     </style>
 24 
 25     <script type='text/javascript'>
 26         $(function() {
 27             $( ".draggable" ).draggable();
 28         });
 29     </script>
 30 </head>
 31 
 32 
 33 <body>
 34 
 35 <!-- 
 36 <span>
 37     <center><h1>{{ room.name }}布局管理</h1></center>
 38 </span>
 39 -->
 40 
 41 <div id="room_all" style="">
 42 
 43     <img style="float:left; width: 75%" src="/images/room/pmt.png" />
 44     
 45     <div class="ui-widget-content draggable" style="top: 50px; left: 50px; display:none">模板</div>
 46     {% for cabinet in cabinets %}
 47     
 48     <div class="ui-widget-content draggable new_cabinet {{ cabinet.id }} ui-draggable" style="left: {{ cabinet.x }}px; top: {{ cabinet.y }}px;">{{ cabinet.id }}</div>
 49 
 50     {% endfor %}
 51 
 52     
 53     <div id='operate' style="font-size:12px; width:235px; float:left; margin-left:30px; margin-top:50px">
 54 
 55         <div id='singl' style="width:230px; margin-bottom:50px">
 56 
 57             <span style="margin:0 20px 0 20px; width:200px; margin-bottom:10px">
 58                 <h3>添加机柜</h3>
 59             </span>
 60             <label>机柜ID</label>
 61             <span id="cabinet" style="margin-left:10px">
 62                 <select id="cabinet_id" style="width: 170px;">
 63                     {% for cabinet in cabinets %}
 64                     <option value="{{ cabinet.id }}">{{ cabinet.id }} 号机柜</option>
 65                     {% endfor %}
 66                 </select>
 67             </span>
 68 
 69 
 70             <button style="position:relative; left:170px; margin-top:10px" onclick="add();">添加</button>
 71         </div>
 72 
 73 
 74         <div style='width:120px; position:relative; left:112px; margin-top:10px;'>
 75             <button onclick="save()">保存</button>
 76             <button onclick="window.location.reload();">重置</button>
 77         </div>
 78     </div>
 79 </div>
 80 
 81 
 82 
 83 <script type='text/javascript'>
 84     // @h3idan
 85 
 86     function add(){
 87         var cabinet_id = $('#cabinet_id').val();
 88         var cabinet_count = $('.ui-widget-content').length;
 89 
 90         var same_cabinet_count = $('.' + cabinet_id + '').length;
 91         if (same_cabinet_count ==1){
 92             alert('不能添加相同的机柜');
 93         }else{
 94             var div = $('<div class="ui-widget-content draggable new_cabinet '+ cabinet_id +'" />').text(cabinet_id).appendTo('#room_all').draggable();
 95             div.css({'left': '25px'})
 96             div.css({'top': (25+35*(cabinet_count-1)) + 'px'})
 97         };
 98     }
 99 
100     function save(){
101         var new_cabinets = $('.new_cabinet');
102         var cabinets_data = new Array()
103         
104         for (i=0; i < new_cabinets.length; i++){
105             var new_cabinet_id = $(new_cabinets[i]).text();
106             var new_cabinet_x = $(new_cabinets[i]).offset().left;
107             var new_cabinet_y = $(new_cabinets[i]).offset().top;
108             
109             var cabinet_data = {
110                 'cabinet_id': new_cabinet_id,
111                 'cabinet_x': new_cabinet_x,
112                 'cabinet_y': new_cabinet_y
113             };        
114             cabinets_data[i] = cabinet_data;
115         };
116         
117         var cabinets_jsondata = $.toJSON(cabinets_data);
118         $.ajax({
119             type: 'POST',
120             url: '/room/saveposition/',
121             data: {'cabinets_data': cabinets_jsondata},
122             success: function(data){
123                 alert(data.result);
124             },
125             error: function(){ 
126                 alert(data.result);
127             }
128         });
129     }
130 
131 </script>
132 
133 
134 </body>
135 </html>

额，后台代码就不贴，没啥逻辑，没啥算法。简单的要死。唯一有点意思的就是draggable还有jquery-json。

jquery-json插件是真心好用啊。省得自己写了。下载地址 

项目地址是在  https://code.google.com/p/jquery-json  估计得FQ。

posted on 2013-06-27 11:11  h3idan  阅读(538)  评论(0)  编辑  收藏  举报

导航