Question

我有一个9格的网格，我需要2个方格来交换每个拖放的位置（这就是为什么我不能使用“可排序”）。我可以达到这样的程度：我可以只拖放每个方块一次 - 在它们被丢弃之后它们会失去功能......我怎样才能让它们在第一次掉落后保持这种拖放功能？这是JSFiddle

HTML

<div id="grid">
    <div class="block one"></div>
    <div class="block two"></div>
    <div class="block three"></div>

    <div class="block four"></div>
    <div class="block five"></div>
    <div class="block six"></div>

    <div class="block seven"></div>
    <div class="block eight"></div>
    <div class="block nine"></div>    
</div>

JS

$(document).ready(function () {
    $(".block").draggable({
        helper:"clone"
    })

    $(".block").droppable({
        drop: function(ev, ui) {
            $(ui.draggable).clone().replaceAll(this);
            $(this).replaceAll(ui.draggable);
        }
    })
})

CSS

.block.one { background-color: blue; float:left;}
.block.two { background-color: red; float:left;}
.block.three { background-color: green; float:left;}

.block.four { background-color: yellow; float:left;}
.block.five { background-color: pink; float:left;}
.block.six { background-color: black; float:left;}

.block.seven { background-color: grey; float:left;}
.block.eight { background-color: brown; float:left;}
.block.nine { background-color: orange; float:left;}

.block { 
    height: 40px; 
    width: 40px;
}
#grid {
    width: 120px;
    height: 120px;
}

Answer 1

第一次删除对象后，可以再次绑定事件。 e.g。

$(document).ready(function () {
    makeDraggable();
    function makeDraggable() {
        $(".block").draggable({
            helper: "clone"
        })
        $(".block").droppable({
            drop: function (ev, ui) {
                $(ui.draggable).clone().replaceAll(this);
                $(this).replaceAll(ui.draggable);
                makeDraggable();
            }

        })
    }
})

Answer 2

我认为此链接可以帮助您。

 <script>  $(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();  });  </script>

<ul id="sortable">  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
 <li class="ui-state-default">3</li>
 <li class="ui-state-default">4</li></ul>

可排序网格也会交换组件。谢谢。 jquery ui sortable grid

jquery draggable和droppable swap places在第一次丢弃时丢失了功能

2 个答案: