使用 JSON 数组数据填充 jQuery 函数变量

Question

更新以显示工作脚本。希望这可以帮助某人。 :)

//Parse JSON array into javascript array  - REQUIRED FOR dynamic add
 const tooltime = JSON.parse(toolitems);
  console.log(tooltime);  
  
  //Log items on stop
  const draggableOptions = {
   stop: function(evt, ui){
      logItems()
   }
}
  //end log

     //DYNAMICALLY generate new copies of items
  $("#menu .menu-item").click(function () {
    // find associated item in toolitems.items array
    const tool = tooltime.items.find((o) => o.id === this.id)
    const $div = $("<div>")
    .data('type', this.id)
    .draggable(draggableOptions)
      .css({
        id: "draggable",
        padding: "0.5em",
        float: "left",
        margin: "0 10px 10px 0",
        cursor: "move",
        position: "absolute",
        background: "rgba(245, 245, 245, 0.5)",
        border: "1px solid #ccc"
      })
      .addClass("draggable", "ui-widget-content")
      .append(
        '<div id="block_container"><div class="remove_block"></div><img src="https://assets.codepen.io/759025/' +
          tool.imagefile +
          '" alt="' +
          tool.item +
          '"></div>'
      )
      .css({
        width: 100
      })
      .append('<div>' +
          tool.item +
          '</div>')
    .css({
      "text-align": "center",
      "font-size": "24px",
      padding: " 0.25em",
      "line-height": "100%"
      //"white-space": "nowrap"
    })
      .appendTo("#containment-wrapper")
      .draggable({
        containment: "#containment-wrapper",
        stack: ".draggable",
        scroll: false
      })
      .resizable({
        minHeight: 100,
        minWidth: tool.imagewidth,
        maxHeight: 500,
        maxWidth: 500,
        aspectRatio: false
      })
  });

我有一个 jQuery 函数，可以在单击菜单时动态生成可拖动项目。目前 - 在构建我的应用程序时，我已经为每种类型的可拖动项目编写了一个相同的函数 - 一切正常。我希望将这些组合成一个函数，并从 JSON 数组中填充项目属性。非常感谢任何帮助 - 谢谢！

数组：

var toolitems =
  '{ "items" : [' +
  '{ "id":"firewall" ,"item":"Firewall" , "category":"Network Devices" , "imagefile":"firewall1.svg", "imagewidth":"100" },' +
  '{ "id":"datadiode" ,"item":"Data diode" , "category":"Network Devices" , "imagefile":"datadiode.svg", "imagewidth":"100" },' +
  '{ "id":"router" ,"item":"Router" , "category":"Network Devices" , "imagefile":"router.svg", "imagewidth":"200" },' +
  '{ "id":"switch" ,"item":"Switch" , "category":"Network Devices" , "imagefile":"server.svg", "imagewidth":"200" },' +
    '{ "id":"Server" ,"item":"Server" , "category":"Servers" , "imagefile":"Server", "imagewidth":"200" },' +
  
  '{ "id":"networkL0" ,"item":"L0" , "category":"Network Levels" , "imagefile":"L0.svg", "imagewidth":"200" },' +
  '{ "id":"thecloud" ,"item":"The Cloud" , "category":"Other" , "imagefile":"thecloud.svg", "imagewidth":"100" ]}';

注释我需要添加变量的地方：

功能：

$(function () {

//VARIABLE "id" is example #firewall

  $("#firewall").click(function () {
    var dynamic_div = $(document.createElement("div"))
      .css({
        id: "draggable",
        padding: "0.5em",
        float: "left",
        margin: "0 10px 10px 0",
        cursor: "move",
        position: "absolute",
        background: "rgba(245, 245, 245, 0.5)",
        border: "1px solid #ccc"
      })
      .addClass("draggable", "ui-widget-content");

    $(dynamic_div)
      .append(

//VARIABLE "imagefile" is img srg, VARIABLE "item" is alt

        '<div id="block_container"><div class="remove_block"></div><img src="firewall1.svg" alt="Firewall"></div>'
      )
      .css({
        width: 100
      });

//VARIABLE "item" is example "Firewall"

    $(dynamic_div).append("Firewall").css({
      "text-align": "center",
      "font-size": "24px",
      padding: " 0.25em",
      "line-height": "100%"
    });


    $(dynamic_div)
      .appendTo("#containment-wrapper")
      .draggable({
        containment: "#containment-wrapper",
        stack: ".draggable",
        scroll: false
      })

//VARIABLE "imagewidth" is minWidth

      .resizable({
        minHeight: 100,
        minWidth: 100,
        maxHeight: 500,
        maxWidth: 500,
        aspectRatio: false
      });
  });

//END  
});

Answer 1

我昨天在这个 UI 上帮助了你，这是我建议的扩展。

首先将菜单项的 id 与 toolitems 中的 id 匹配，然后您可以使用 Array#find() 获取创建新元素所需的对象。我对此进行了简化，只得到了一些文本。

我还使用了一个全局draggableOptions 对象，您可以将其传递给新的元素可拖动方法。 stop 事件使用我昨天提供的关于如何循环所有项目以创建对象数组的建议。

下面的样式不是很好，项目非常原始，但拖动的工作原理与您可以存储的项目元数据数组的日志记录一样

const draggableOptions = {
   stop: function(evt, ui){
      logItems()
   }
}

$('#menu .product-add').click(function(){
   // find associated item in toolitems.items array
   const tool = toolitems.items.find(o=> o.id===this.id)
   // only getting text for now. You can extend this for image, category etc
   const $div = $('<div>').data('type', this.id)
                          .text(tool.item)
                          .draggable(draggableOptions);
                          
   $('#containment-wrapper').append($div)             

})

function logItems() {
  const dataArr = $('#containment-wrapper').children().map(function () {
      const $el = $(this);
      const obj = {
        type: $el.data('type'), // from data attribute,
        left: $el.css('left'),
        top: $el.css('top'),
        zIndex: $el.css('zIndex'),
      };
      return obj;
    }).get();
  console.log(dataArr);
}

#containment-wrapper {
  margin-left: 200px;
  height: 90vh;
  padding: 0.5em;
  background-repeat: no-repeat;
  background-clip: padding-box;
  background-position: 50% 25%;
  background-size:80%;
}

#outsidecontainer {
  border: 2px solid gray;  
}

#menucontainer {
  height: 100%;
  float: left;
  position: fixed;
  width: 200px;
  z-index: 1;
}

.remove_block{
  width: 100%;
  text-align: right;
  margin: 0 0 10px 0;
  cursor: default;
}

div.remove_block:after{
  display: inline-block;
  content: "\00d7"; /* This will render the 'X' */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="outsidecontainer">
  <div id="menucontainer">
     <h4>Products</h4>
    <ul id="menu">
     
      <li>
        <div class="product-add" id="router">Router</div>
      </li>
      <li>
        <div class="product-add" id="firewall">Firewall</div>
      </li>
     
    </ul>
   
  </div>
  <div id="containment-wrapper">
  </div>
  </div>
  
  <script>var toolitems =
  { "items" : [
  { "id":"firewall" ,"item":"Firewall" , "category":"Network Devices" , "imagefile":"firewall1.svg", "imagewidth":"100" },
  { "id":"datadiode" ,"item":"Data diode" , "category":"Network Devices" , "imagefile":"datadiode.svg", "imagewidth":"100" },
  { "id":"router" ,"item":"Router" , "category":"Network Devices" , "imagefile":"router.svg", "imagewidth":"200" },
  { "id":"switch" ,"item":"Switch" , "category":"Network Devices" , "imagefile":"server.svg", "imagewidth":"200" },
  { "id":"Server" ,"item":"Server" , "category":"Servers" , "imagefile":"Server", "imagewidth":"200" },  
  { "id":"networkL0" ,"item":"L0" , "category":"Network Levels" , "imagefile":"L0.svg", "imagewidth":"200" },
  { "id":"thecloud" ,"item":"The Cloud" , "category":"Other" , "imagefile":"thecloud.svg", "imagewidth":"100" }]};</script>