JQuery implements click and move of elements

JQuery implements click and move of elements

HTML

<div id="preview">
    <div>
        <div style="top: 0px;">
            <span class="glyphicon glyphicon-remove"></span>
        </div>
        <p>用章类别</p>
        <span style="color:red;position:relative;top: -22px;">*</span>
        <span>请选择用章类别
            <span class="glyphicon glyphicon-menu-right" style="height:40px;line-height:40px"></span>
            <span class="glyphicon glyphicon-arrow-up"></span>
            <span class="glyphicon glyphicon-arrow-down"></span>
        </span>
    </div>
    <div>
        <p>用章名称</p>
        <span style="color:red;position:relative;top: -22px;">*</span>
        <span class="control_commit">请输入用章名称
            <span class="glyphicon glyphicon-arrow-up"></span>
            <span class="glyphicon glyphicon-arrow-down"></span>
        </span>
    </div>
    <div>
        <p>用章事由</p>
        <span style="color:red;position:relative;top: -22px;">*</span>
        <span class="control_commit">请输入用章事由
            <span class="glyphicon glyphicon-arrow-up"></span>
            <span class="glyphicon glyphicon-arrow-down"></span>
        </span>
    </div>
    <div>
        <p>附件</p>
        <span style="color:red;position:relative;top: -22px;">*</span>
        <div class="control_commit">
            <img src=".../attachment.png" width="26px" height="26px" />
            <span class="glyphicon glyphicon-arrow-up"></span>
            <span class="glyphicon glyphicon-arrow-down"></span>
        </div>
    </div>
    <div>
        <p>发送单位</p>
        <span class="tip" style="color:red;position:relative;top: -22px;">*</span>
        <span class="control_commit">请选择发送单位
            <span class="glyphicon glyphicon-arrow-up"></span>
            <span class="glyphicon glyphicon-arrow-down"></span>
        </span>
    </div>
</div>

JS

//找到本元素的上一个兄弟元素，然后insertBefore插到兄弟元素前面
$('body').on('click', '.glyphicon-arrow-up', function() {
    $(this).parents('.control_model').insertBefore($(this).parents('.control_model').prev());
});
//找到本元素的下一个兄弟元素，然后insertAfter插到兄弟元素后面
$('body').on('click', '.glyphicon-arrow-down', function() {
    $(this).parents('.control_model').insertAfter($(this).parents('.control_model').next());
});

Original image:

Click to move down 用章类别: