jq穿梭框实现，vue等框架可直接使用

先看效果，穿梭框内选项可左右，上下移动：

接着是实现（vue，可将关键代码摘取出来用于其他前端框架）：

<style lang="less">
    @import './wm-transfer.less';
</style>

<template>
    <div>
        <div class="select">
            <div class="select-item">
                <div class="transfer-title">
                <span>显示</span><button id="up_btn">↑</button><button id="down_btn">↓</button><button id="down_last_btn">↓↓</button><button id="before_first_btn">↑↑</button>
                </div>
                <select multiple="multiple" id="select1">
                <option value="选项1">选项1</option>
                <option value="选项2">选项2</option>
                <option value="选项3">选项3</option>
                <option value="选项4">选项4</option>
                <option value="选项5">选项5</option>
                <option value="选项6">选项6</option>
                <option value="选项7">选项7</option>
                <option value="选项8">选项8</option>
                <option value="选项9">选项9</option>
                <option value="选项10">选项10</option>
                <option value="选项11">选项11</option>
                <option value="选项12">选项12</option>
                <option value="选项13">选项13</option>
                <option value="选项14">选项14</option>
                <option value="选项15">选项15</option>
                <option value="选项16">选项16</option>
                </select>
            </div>
            <div class="btn-item">
                <p><span id="add">></span></p>
                <p><span id="remove"><</span></p>
                <p><span id="add_all">>></span></p>
                <p><span id="remove_all"><<</span></p>
            </div>
            <div class="select-item">
                <div class="transfer-title">
                <span>隐藏</span>
                </div>
                <select multiple="multiple" id="select2"></select>
            </div>
        </div>
       
        <div>
            <p class="transfer-info">鼠标双击调整显示/隐藏字段</p>
            <div class="transfer-btn">
                <Button type="primary" @click="resetTransferDefault">恢复默认</Button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                selectedColumns: [],
                unselectedColumns: [],
            }
        },
        props: {
            
        },
        methods: {
            initTransferEvent() {
                let vm = this;
                //移到右边
                $(document).on("click", "#add", function() {
                    if (!$("#select1 option").is(":selected")) {
                    alert("请选择移动的选项");
                    } else {
                    $("#select1 option:selected").appendTo("#select2");
                    }
                });
                //移到左边
                $(document).on("click", "#remove", function() {
                    if (!$("#select2 option").is(":selected")) {
                    alert("请选择移动的选项");
                    } else {
                    $("#select2 option:selected").appendTo("#select1");
                    }
                });
                //双击选项
                $(document).on("dblclick", "#select1", function() {
                    $("option:selected", this).appendTo("#select2");
                });
                //双击选项
                $(document).on("dblclick", "#select2", function() {
                    $("option:selected", this).appendTo("#select1");
                });
                //全部移到右边
                $(document).on("click", "#add_all", function() {
                    $("#select1 option").appendTo("#select2");
                });
                //全部移到左边
                $(document).on("click", "#remove_all", function() {
                    $("#select2 option").appendTo("#select1");
                });

                //上移动按钮
                $(document).on("click", "#up_btn", function() {
                    var firstSelectedIndex = $("#select1 option:selected")[0].index;
                    $("#select1 option")
                    .filter(":eq(" + (firstSelectedIndex - 1) + ")")
                    .before($("#select1 option:selected"));
                });

                //下移动按钮
                $(document).on("click", "#down_btn", function() {
                    var firstSelectedIndex = $("#select1 option:selected")[
                    $("#select1 option:selected").length - 1
                    ].index;
                    $("#select1 option")
                    .filter(":eq(" + (firstSelectedIndex + 1) + ")")
                    .after($("#select1 option:selected"));
                });

                //移动到最底部
                $(document).on("click", "#down_last_btn", function() {
                    var firstSelectedIndex = $("#select1 option:selected")[0].index;
                    $("#select1 option:last").after($("#select1 option:selected"));
                });

                //移动第一
                $(document).on("click", "#before_first_btn", function() {
                    var firstSelectedIndex = $("#select1 option:selected")[0].index;
                    $("#select1 option:first").before($("#select1 option:selected"));
                });
            },
            //恢复默认
            resetTransferDefault() {
                $('#remove_all').click();
            },
        }
    };
</script>

css:

::-webkit-scrollbar {
    width: 0px
}

.select {
    width: 600px;
    height: 340px;
}

.select div {
    float: left;
}

.select .select-item {
    padding: 5px 20px;
}

.select .select-item select {
    width: 220px;
    height: 300px;
    border: 1px #bbb solid;
    padding: 4px;
    font-size: 14px;
}

.btn-item {
    margin-top: 75px;
    p {
        margin-top: 16px;
    }
    p span {
        display: block;
        text-align: center;
        width: 50px;
        height: 30px;
        cursor: pointer;
        font-size: 14px;
        border: 1px solid #bbb;
        line-height: 30px;
        font-size: 20px;
    }
}

.transfer-title{
    font-size: 14px;
    float: none !important;
    font-weight: bold;
    span {
        float: left;
    }
    button {
        float: right;
        background: none;
        margin: 0 0 2px 5px;
        border: 1px solid #ccc;
        cursor: pointer;
        outline: none;
        width: 18px;
    }
}

.transfer-info{
    text-align: left;
    margin-left: 20px;
}

.transfer-btn{
    text-align: center;
    margin-top: 5px;
}

复制可直接使用哦~