Question

我正在尝试制作一个简单的谜题。当您移动所选的div 1时，它必须交换放置它的div 2的位置，div 2必须替换div 1的位置。如果您将蓝色降为红色，则可以看到此信息。如何对所有元素使用此规则？

我看到很多插件可以解决它 - 但是不喜欢在我的项目中使用借来的代码，所以如果有人给出建议或告诉我该怎么做，我将不胜感激。

<table>
<tr>
<td class="drop"><div class="red"></div></td>
<td class="drop"><div class="blue"></div></td>
<td class="drop"><div class="grey"></div></td>
<td class="drop"><div class="yellow"></div></td>
</tr>
</table>

=============================================== =======

.drop{
      border:1px solid black;
      width:5em;
      height:5em;
      padding: 1em;
    }
.red{
      border:1px solid black;
      width:5em;
      height:5em;
      background:red;
      color:white;
    }
.blue{
      border:1px solid black;
      width:5em;
      height:5em;
      background:blue;
      color:white;
    }
.grey{
      border:1px solid black;
      width:5em;
      height:5em;
      background:grey;
      color:white;
    }
.yellow{
      border:1px solid black;
      width:5em;
      height:5em;
      background:yellow;
      color:white;
    }

=============================================== ===

    $('.red,.blue,.grey,.yellow').draggable({
            helper : 'original',
            opacity : 0.5,
            axis:'x'
    });
    var blueOffset = $('.blue').offset();
    var redOffset = $('.red').offset();

    $('.drop').droppable({    
        drop : function(event, ui) {
                    $('.red').offset(blueOffset);
                    $('.blue').offset(redOffset);
            }
    });

Answer 1

你遇到的部分问题是你在你的函数之外定义你的blueOffset和redOffset变量，所以每当.drop（）被触发时，你都会使用原始的偏移来确定div应该在哪里移动到，这就是为什么这只是第一次工作。

您需要做的是确定每次删除元素时动态删除的内容。我相信你最好使用draggable的stop属性而不是单独的可放置功能。这是一个应该让你开始的小提琴：http://jsfiddle.net/2MYkV/

我使用的代码：

        $('.drag').draggable({
            helper : 'original',
            opacity : 0.5,
            axis:'x',
            revert: true,
            stop: function(event) {
                    var dropelt = document.elementFromPoint(event.clientX, event.clientY);
                    var dropcell = dropelt.tagName == "td" ? $(dropelt) : $(dropelt).closest('td');
                    var dropdiv = dropcell.find('div');
                    var origcell = $(this).parent('td');
                    var origdiv = origcell.find('div');
                    origdiv.detach();
                    dropdiv.detach();


                    origcell.append(dropdiv);
                    dropcell.append(origdiv);
            }
    });

jQuery UI拖放拼图

1 个答案: