Question

我正在开展一项活动，要求在某些地方放置某些字母以完成单词。

以下是截图：

The Activity I'm Working On
（链接它，因为它太大了）

底部的两个小木板包含应该拖到较大木板上的空白框中的字母。问题是，每次我尝试将字母拖到空格中时，都会这样做：

如果我不将它拖到某个位置（例如，我想将它正好放在红色框的中心），它会恢复到原来的位置，好像我从未将它放在一个可放置的位置。

这是一个错误吗？有解决方法吗？

这是脚本：

    $(".drag").draggable({ revert: 'invalid' });

/*======================================================*/  

    $( "#dropArea1A" ).droppable({

                        accept: '.drag',
                        drop: function( event, ui) {
                            console.log(ui.draggable.attr('class'));
                            console.log(answers);
                            console.log(correct);

                            if(ui.draggable.hasClass('letterH')){ choice1 = 'correct'; $('#dropArea1A').addClass('correct') }

                            $(".drag").css('cursor', 'default');
                            $(".drag").append(ui.draggable.css('margin','0'));
                            $(".draggable").draggable({ disabled: false });
                            $(this).append(ui.draggable.css('position','static'));
                            $(this).droppable( 'disable' );

                        },

                    });

还有一些可能有用的其他信息：我在样式表中使用了position: absolute 很多来将droppable div放到正确的位置。木板（和静态信箱）是背景图像。这会是罪魁祸首吗？

Answer 1

在一些聊天室遍历和玩jsfiddle之后，我发现可放置区域的css margin属性存在问题，而不是position: absolute。如果您为margin-top属性设置margin-left或margin或任何其他值，只会移动 - >掉落区域不会。

我希望这有助于某人！

Answer 2

四年前在这里报道了这个问题：http://bugs.jqueryui.com/ticket/6876

最近在jquery-ui 1.11.2中修复了

可拖动 - Droppable定位错误？

2 个答案: