Question

我正在制作某种网格地图编辑器，更多的是作为现在要学习的实验而遇到一些问题。

情况：

我有一个20x20网格的10px x 10px div（可能是其他任何东西），背景为黑色，全部可以放置。
我在网格外面有两个div，一个灰色，一个绿色，可拖动，以填充网格，因为我想克隆它们。

当我拖动其中一个特殊div并插入一个可放置的网格div时，让我们称之为“drop1”，这个drop1变成我想要的颜色，让我们说绿色，但是原来的绿色变得无法打开，所以我可以'用它来“填充”另一个可放弃的div。

这是我的JS：

$(function() {
    $( ".draggable" ).draggable({
        revert: "invalid" ,
        helper: function(){
            $copy = $(this).clone();
            return $copy;},
        appendTo: 'body',
        scroll: false
    });
    $( ".droppable" ).droppable({
        hoverClass: "droppableHover",
        drop: function( event, ui ) {
            $( this )
                .removeClass( "droppable" )
                .addClass( function(){
                    if ($ui.hasClass('graycell'))
                        return 'graycell';
                    else return 'greencell';
                })
                .addClass( "draggable" )
        }
    });
});

这是一些HTML：

                    <div class="graycell draggable" id="gray"></div>
                    <div class="greencell draggable" id="green"></div> 

<div title="(0,0)" class="cellborder droppable" id="0_0"></div>
<div title="(0,1)" class="cellborder droppable" id="0_1"></div>
<div title="(0,2)" class="cellborder droppable" id="0_2"></div>
<div title="(0,3)" class="cellborder droppable" id="0_3"></div>
<div title="(0,4)" class="cellborder droppable" id="0_4"></div>
<div title="(0,16)" class="cellborder droppable" id="0_16"></div>

我不确定我是否已经很好地解释了自己，所以很抱歉并在需要时要求澄清。

修改

我发现当我不在droppable元素的.addClass（）方法中使用函数时（比如直接使用.addClass（'gray'）），这可以正常工作，但是当我添加时函数（如上面显示的代码中）从两个类中选择，它不起作用，就像它实际上没有“克隆”div一样。

用于映射的JQuery UI可拖动克隆

0 个答案: