jquery - jQuery UI 拖放交换元素

Question

我不能处理一件事 - 在两个 div 之间交换元素。这是我的代码

 $(function () {
    $('#container').sortable({
        tolerance: "pointer"
    });

    $('#box1').sortable({
        tolerance: "pointer"
    });
    $('#box1').on("sortreceive", function (event, ui) {
        var $list = $(this);

        if ($list.children().length > 1) {
            $(ui.sender).sortable('cancel');
        }
    });

    $('#box2').sortable({
        tolerance: "pointer"
    });
    $('#box2').on("sortreceive", function (event, ui) {
        var $list = $(this);

        if ($list.children().length > 1) {
            $(ui.sender).sortable('cancel');
        }
    });
    $('.item').sortable({
        connectWith: '.item'
    });
    $("#container,#box1,#box2").disableSelection();
});

我的小提琴：http: //jsfiddle.net/kehator/TsJgR/

我想改变这一行：

    $(ui.sender).sortable('cancel');

它必须交换元素，而不是取消。我不知道该怎么做。许多脚本不起作用..我绝望了。

Answer 1

尝试这个：

                 <script>
                        $(function() {
                        $( "#sortable1, #sortable2" ).sortable({
                        connectWith: ".connectedSortable"
                        }).disableSelection();
                        });
                        </script>

                        <script>

                        $(function() {
                    $( "#sortable1" ).sortable({
                      connectWith: ".connectedSortable",
                        start: function(e,ui){
                            ui.item.css('border-style', 'solid');
                            ui.item.css('border-color', 'rgb(211, 211, 211)');
                        },
                        stop: function(e,ui){
                            ui.item.css('border-style', 'solid');
                            ui.item.css('border-color', 'rgb(252, 239, 161)');
                            ui.item.css('background', 'url("images/ui-bg_glass_55_fbf9ee_1x400.png")');
                            ui.item.css('background-repeat', 'repeat-x');
                        }
                    }).disableSelection();
                  });

                        </script>

                        <script>

                        $(function() {
                    $( "#sortable2" ).sortable({
                      connectWith: ".connectedSortable",
                        start: function(e,ui){
                            ui.item.css('border-style', 'solid');
                            ui.item.css('border-color', 'rgb(211, 211, 211)');
                        },
                        stop: function(e,ui){
                            ui.item.css('border-style', 'solid');
                            ui.item.css('border-color', 'rgb(211, 211, 211)');
                            ui.item.css('background', 'url("images/ui-bg_glass_75_e6e6e6_1x400.png")');
                            ui.item.css('background-repeat', 'repeat-x');
                        }
                    }).disableSelection();
                  });

                        </script>