Javascript 使用；“拖拉式”；创建可拖动跨距的步骤

到目前为止，我已经完成了这个页面。正如您希望看到的，它建议将右侧边栏上的单词拖到插槽中：

这些单词是从PHP数组中提取出来的，按下按钮可以在使用AJAX时加载一些新单词

我正在尝试实现Dragabilly，因为它具有我想要的功能和外观：

但我在使用它时遇到了问题。要定义哪些项目是可拖动的，我需要将

class=“draggie”

添加到每个跨度中

以下是创建我的跨距的代码：

<div class="words one">
    <?php foreach (array_rand($poolOne, 4) as $key) {
      echo "<span>".$poolOne[$key]."</span>";
    }?>
</div>

为此，我添加了“draggie”类名：

echo "<span class="draggie">".$poolOne[$key]."</span>";

echo“$poolOne[$key]”；

然而，我不知道为什么，但这打破了整个页面。似乎它不能再调用AJAX了。但是我不确定，为什么在一些PHP中添加一个简单的类名会导致整个页面崩溃？

这里是第一个链接中显示的站点代码的副本，但添加了

class=“draggie”

——您将看到页面显示为空白。除了添加了

draggie

类之外，其他一切都是一样的

---

我不知道这是否会破坏整个页面，但您正在尝试嵌套双引号

echo“$poolOne[$key]”

如果PHP中没有名为
draggie
的内容，PHP将抛出错误并退出渲染

我猜您也关闭了错误

您可以将
draggie
周围的双引号替换为单引号（
class='draggie'
），也可以转义内部的双引号集（
class='draggie\'
）。我建议只切换到单引号。
可能有一个对象或类名具有相同的名称。不，没有其他名称具有draggie。。。只是跨度。