我正在使用 jQuery 和 jQuery UI 创建交互式 2D 沙箱/ Canvas 环境。我有一个预定义对象和属性的列表,我现在正在处理的本质上是一个“插入对象”按钮。
我想要的过程如下:
- 用户点击“插入对象”
- 弹出一个菜单,其中填充了我的对象列表及其属性
- 用户单击其中一个对象名称,就会创建一个新的可拖动 Div,其中包含该对象的所有属性
例如,如果我有一个像这样的对象列表:
var items =
{
item1:["Oscar",
"Grouchy",
"Green"],
item2:["Cookie Monster",
"Hungry",
"Blue"]}
我希望菜单填充如下:
奥斯卡 心情: 脾气暴躁 颜色: 绿色 cookies 怪兽 心情:饿了 颜色:蓝色
如果他们点击 Cookie Monster,就会创建一个可拖动的 Div,其中包含一些将其标记为“Cookie Monster”的文本、蓝色背景以及一些关于它饥饿的信息(即,如果我后来创建了一些 cookie 对象,我会能够将它们拖到上面)。
jQuery UI 已经处理了拖放位。我有一些代码可以从对象列表中填充菜单。但是,我不确定如何根据原始列表创建具有属性的对象,总的来说,我觉得我没有以最有效的方式这样做。我现在拥有的内容如下:
$( "button" )
.button()
.click(function() {
$.each( items, function( key, value ) { //items is my list of items
$( "#dialog" ).append("<a href='#' class='NodeCreator'>"+value[0]+"</a>"+"<p>"+value[1]+"<p>"+"<p>Input: "+value[2]+"<p>"+"<p>Output: "+value[3]+"<p>"); //#dialog is the class of my menu
});
$(".NodeCreator").click(function(){ //I made the name of each object a link with id NodeCreator
$( "<div id='draggable3' class='draggable ui-widget-content ui-draggable ui-draggable-handle' style='position: relative;'><p>Drag me around</p></div>" ).appendTo( "body" ); //NodeCreator creates a draggable DIV, but right now they're all identical. I want them to be dependent on which link they click
$( ".draggable" ).draggable();
});
$('#dialog').dialog('open');
});
那么我将如何让每个链接创建一个“知道”其自身属性的 Div,总的来说,是否有更好的方法来构建这一切?
谢谢!
最佳答案
关于javascript - 使用 Javascript 对象填充菜单,然后使用菜单创建 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38002302/