如何在div中动态生成可放置/可拖动/可排序的div元素?

发布于 2024-10-27 16:51:30 字数 511 浏览 0 评论 0原文

您好,所以我必须回答这个问题:

  1. 我希望能够在用户执行操作时动态创建 div 元素(例如,单击按钮将某些内容拖入可放置并创建新的可放置)。我现在正在使用这段代码,它成功生成了 css 块:

    函数createDiv() { var divTag = document.createElement("div");

    divTag.id = "slotclass";

    divTag.className ="连接";

    document.body.appendChild(divTag); } ...虽然我不太确定在此之后如何使其可放置/可拖动/可排序。

  2. 我希望动态生成的 div 元素出现在具有 css 样式表中的特定 id 的 div 中。但是,当我使用 createDiv() 时,它会在 div 括号之外生成它,无论我尝试过什么(例如不关闭括号或将按钮放在 div 括号内)。

如果有人可以在这两个领域提供帮助,那就太好了!非常感谢。

Hello so I have to parts to this question:

  1. I would like to be able to dynamically create div elements when a user performs an action (say, clicks a button a drags something into a droppable and create a new droppable). I'm using this code right now and it's successfully generating the css block:

    function createDiv()
    {
    var divTag = document.createElement("div");

    divTag.id = "slotclass";

    divTag.className ="connect";

    document.body.appendChild(divTag);
    }
    ... though I'm not too sure how to make it droppable/draggable/sortable after this.

  2. I'd like for the dynamically generated div element to appear within a div that has a specific id from the css stylesheet. However, when I use createDiv(), it generates it outside of the div brackets regardless of what things I've tried (such as not closing brackets or placing my button in this case within the div brackets).

If anyone could help out with these two areas, that would be so great! Many thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

凉世弥音 2024-11-03 16:51:30
  1. 假设您想让它可排序,请在追加子项后初始化可排序:
    $("#slotclass").sortable({ ... });$(divTag).sortable({ ... });

  2. 您将新的 div 添加到正文中。为了简单起见,我使用 jQuery。将 document.body.appendChild(divTag); 替换为 $('#yourtargetdiv').append($(divTag));

  1. Let say you want to make it sortable, initialize sortable after you append child:
    $("#slotclass").sortable({ ... }); or $(divTag).sortable({ ... });

  2. You appended your new div in the body. To make it simple, I use jQuery. Replace document.body.appendChild(divTag); with $('#yourtargetdiv').append($(divTag));

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文