如何在div中动态生成可放置/可拖动/可排序的div元素?
您好,所以我必须回答这个问题:
我希望能够在用户执行操作时动态创建 div 元素(例如,单击按钮将某些内容拖入可放置并创建新的可放置)。我现在正在使用这段代码,它成功生成了 css 块:
函数createDiv() { var divTag = document.createElement("div");
divTag.id = "slotclass";
divTag.className ="连接";
document.body.appendChild(divTag); } ...虽然我不太确定在此之后如何使其可放置/可拖动/可排序。
我希望动态生成的 div 元素出现在具有 css 样式表中的特定 id 的 div 中。但是,当我使用 createDiv() 时,它会在 div 括号之外生成它,无论我尝试过什么(例如不关闭括号或将按钮放在 div 括号内)。
如果有人可以在这两个领域提供帮助,那就太好了!非常感谢。
Hello so I have to parts to this question:
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.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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
假设您想让它可排序,请在追加子项后初始化可排序:
$("#slotclass").sortable({ ... });
或$(divTag).sortable({ ... });
您将新的 div 添加到正文中。为了简单起见,我使用 jQuery。将
document.body.appendChild(divTag);
替换为$('#yourtargetdiv').append($(divTag));
Let say you want to make it sortable, initialize sortable after you append child:
$("#slotclass").sortable({ ... });
or$(divTag).sortable({ ... });
You appended your new div in the body. To make it simple, I use jQuery. Replace
document.body.appendChild(divTag);
with$('#yourtargetdiv').append($(divTag));