sortable 可拖拽元件
阿新 • • 發佈：2018-12-12
<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9,Chrome=1" /> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="http://img.seeyouyima.com/icon/favicon.ico" type="image/x-icon"> <link href="/front/css/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="/front/css/common.css" rel="stylesheet"> <link href="/front/css/add_base.css" rel="stylesheet"> <script type="text/javascript" src="/front/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/front/js/jquery-ui.min.js"></script> <style> #table td{ word-break: break-all; } .header { margin-bottom: 20px; margin-top: 20px; } .cancel { margin-left: 0px; } </style> <div> <h4 class="page-header-title pdbtm0"> <p><span id="view_tab_name" style="font-size: 18px;"><?php echo $tabs[$tab_id]; ?> </span> <span style="font-size:14px;">結果置頂操作</span></p> <button type="button" class="pull-right right-btn mt25" id="btn-save" style="margin-top: 15px; margin-left: 20px;">保 存</button> <button type="button" class="pull-right right-btn mt25" id="query_word_content" style="margin-top: 15px;">預 覽</button> </h4> <div class="page-header header"> <form class="form-inline" role="form" id="fom" method="post" name="fom"> <input type="hidden" name="hotspot_id" id="hotspot_id" value="<?php echo $hotspot_id; ?>"> <input type="hidden" name="tab_id" id="tab_id" value="<?php echo $tab_id; ?>"> <table class="search_table"> <tbody> <tr> <td style="font-size: 18px;">Query:</td> <td id="hotspot_word" style="font-size: 14px;"> <?php echo $hotspot_word; ?> </td> </tr> </tbody> </table> <div class="content-list" style="position: relative;"> <div class="content-table"> <div id="content-table-tpl"> <table class="table table-bordered table-hover comtable thcenter" id="sortable"> <thead> <tr> <th width="3%">位置</th> <th width="8%">型別</th> <th width="8%">資訊ID/貼子ID/專題卡片ID/自定義卡片ID</th> <th width="40%">標題</th> <th width="16%">過期時間</th> <th width="">操作</th> <th width="12%">操作歷史</th> </tr> </thead> <tbody> <?php $invalid_date = date('Y-m-d H:i:s', strtotime('+90 day')) ?> <?php for($i=1; $i<=20; $i++){ ?> <tr id="row-<?php echo $i ?>"> <td> <input type="hidden" class="position" name="position[]" value="<?php echo $i ?>"> <input type="hidden" class="content_id" name="content_id[]" value="0"> <span><?php echo $i; ?></span> </td> <td> <select name="type[]" class="col-sm-3 form-control news_type"> <option value="-1" data-tip="請選擇型別">請選擇型別</option> <option value="9" data-tip="資訊ID">資訊</option> <option value="8" data-tip="帖子ID">帖子</option> <option value="7" data-tip="貼士ID">貼士</option> <option value="15" data-tip="專題卡片ID">專題</option> <option value="14" data-tip="自定義卡片ID">自定義卡片</option> </select> </td> <td> <input type="text" class="form-control news_id" name="news_id[]" placeholder=""> </td> <td> <input type="text" class="form-control news_title w500" name="news_title[]" readonly placeholder=""> </td> <td> <input type="text" class="form-control invalid_date" name="invalid_date[]" value="<?php echo $invalid_date ?>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"> </td> <td> <a href="javascript:void(0)" class="view_url" data-news-id="" data-type="">預覽</a> <a href="javascript:void(0)" class="cancel hide" title="儲存後生效" data-id="0" class="btn">刪除</a> </td> <td class="operation"> <?php echo $val['update_dt']; ?> </br> <?php echo empty($admin_user[$val['admin_id']]['admin_name']) ? $admin_user[$val['admin_id']]['user_name'] : $admin_user[$val['admin_id']]['admin_name']; ?> </td> </tr> <?php } ?> </tbody> </table> </div> </div> </div> </form> </div> </div> <script> $(document).ready(function () { render_sortable() function render_sortable() { $('#sortable tbody').sortable({ helper: function(e, ui) { ui.children().each(function() { // 修復在拖動時，拖動行的cell（單元格）寬度會發生改變 $(this).width($(this).width()); }); return ui; }, stop: function(event, ui) { i = 1; $('#sortable tbody').find('tr').each(function(){ $(this).find('td:eq(0) span').text(i); $(this).find('td:eq(0) input.position').val(i); i++; }) } }).disableSelection(); } }) </script>
