1. 程式人生 > >sortable 可拖拽元件

sortable 可拖拽元件

<!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>


在這裡插入圖片描述