1

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

情况：

  • 我有一个 10px x 10px div 的 20x20 网格（可以是其他任何东西），黑色背景，全部可放置。
  • 我在该网格之外有两个 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>

我不确定我是否已经很好地解释了自己，所以很抱歉，如果您需要，请要求澄清。

编辑：

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

4

0 回答 0