Question

如果按下按钮，选择器的值将被输入到变量选择器本身将被清除，然后填充。问题：清洁选择器CHILD＃1-CHILD＃6被拖动，清洁后它们没有被拖动。如何制作和清洁后可以拖动选择器（保持以前的设置可排序）？

这是我的示例代码：

<script type="text/javascript" charset="utf-8" src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://yandex.st/jquery-ui/1.9.2/jquery-ui.min.js"></script>

<script>
    $(document).ready(function(){

        // Sort the parents
        $(".sortable").sortable({
            containment: "parent",
            items: "> div",
            handle: ".move",
            tolerance: "pointer",
            cursor: "move",
            opacity: 0.7,
            revert: 300,
            delay: 150,
            dropOnEmpty: true,
            placeholder: "movable-placeholder",
            start: function(e, ui) {
                ui.placeholder.height(ui.helper.outerHeight());
            }
        });

        // Sort the children
        $(".group-items").sortable({
            containment: "document",
            items: "> div",
            connectWith: '.group-items'
        });

        $(".hide-or-show").on("click", function(){
            var temp = $(".sortable").html();
            $(".sortable").empty().append(temp);
        });

    })


</script>


<style>
    .sortable {

    }
    .group-caption {
        background: #D3CAAF;
        width: 400px;
        display: block;
        padding: 20px;
        margin: 0 0 15px 0;
    }
    .group-item {
        background: #5E5E5E;
        width: 300px;
        height: 30px;
        display: block;
        padding: 3px;
        margin: 5px;
        color: #fff;
    }
    .move {
        background: #ff0000;
        width: 30px;
        height: 30px;
        float: right;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        line-height: 30px;
        font-family: Arial;
        cursor: move;
    }
    .movable-placeholder {
        background: #ccc;
        width: 400px;
        height: 100px;
        display: block;
        padding: 20px;
        margin: 0 0 15px 0;
        border-style: dashed;
        border-width: 2px;
        border-color: #000;
    }
    .hide-or-show {
        background: rgba(169, 241, 134, 0.7);
        display: inline-block;
        padding: 15px;
        border: 2px solid #008000;
        position: absolute;
        top: 10px;
        left: 500px;
            cursor: pointer;
    }
</style>


<div class="sortable">

    <div class="group-caption">
        <h4>PARENT #1</h4>
        <div class="move">+</div>
        <div class="group-items">
            <div class="group-item">CHILD #1<div class="move">+</div></div>
            <div class="group-item">CHILD #2<div class="move">+</div></div>
        </div>
    </div>

    <div class="group-caption">
        <h4>PARENT #2</h4>
        <div class="move">+</div>
        <div class="group-items">
            <div class="group-item">CHILD #3<div class="move">+</div></div>
            <div class="group-item">CHILD #4<div class="move">+</div></div>
        </div>
    </div>

    <div class="group-caption">
        <h4>PARENT #3</h4>
        <div class="move">+</div>
        <div class="group-items">
            <div class="group-item">CHILD #5<div class="move">+</div></div>
            <div class="group-item">CHILD #6<div class="move">+</div></div>
        </div>
    </div>

    <div></div>

</div>

<div class="hide-or-show">PRESS HIDE & SHOW</div>

Answer 1

如果你把.sortable放在这样的函数中：

function initialise() {
        // Sort the parents
        $(".sortable").sortable({
            containment: "parent",
            items: "> div",
            handle: ".move",
            tolerance: "pointer",
            cursor: "move",
            opacity: 0.7,
            revert: 300,
            delay: 150,
            dropOnEmpty: true,
            placeholder: "movable-placeholder",
            start: function(e, ui) {
                ui.placeholder.height(ui.helper.outerHeight());
            }
        });

        // Sort the children
        $(".group-items").sortable({
            containment: "document",
            items: "> div",
            connectWith: '.group-items'
        });
    };

您可以在隐藏/显示按钮后重复使用它。不要忘记在开始时调用初始化函数。

以下是我的解决方案：http://jsfiddle.net/NFeqG/

可排序的jquery ui如果选择器已被删除并填充，则事件处理程序将丢失

1 个答案: