Question

jQuery和JavaScript相当新，所以请保持温和......

我正在开发一个POC来创建一个＆＃34;列映射＆＃34;用户可以拖放＆＃34;列标题列表的页面＆＃34;到新列标题的网格。我需要构建一个可以发送回SQL数据库的数组。我有这个部分（大部分）按照我的意愿运作。

当项目从左侧的列列表拖动到右侧的标题网格时，如果该项存在，则代码应更新/替换该索引处的数组项。如果该项不存在，则应将该项添加到数组中。

例如：如果你拖动＆＃34;名字＆＃34; to＆＃34; Headers＆＃34;它应该在索引位置0添加。如果你然后拖动＆＃34;名字＆＃34; ＆＃34;与＆＃34;它应该删除＆＃34;名字＆＃34;索引0处的值，并在位置1处添加值。如果然后拖动＆＃34;姓氏＆＃34; ＆＃34;与＆＃34;它应该使用＆＃34;姓氏＆＃34;更新位置1的数组。值。

＆＃13;

$(document).ready(() => {
  $(function() {
    $('.item').draggable({
      cursor: "crosshair",
      cursorAt: {
        left: 5
      },
      distance: 10,
      opacity: 0.75,
      revert: true,
      snap: ".target",
      containment: "window"
    });
  });

  $(function() {
    var array = [];
    var arraytext = '';
    $('.target').droppable({
      accept: ".item",
      tolerance: 'pointer',
      activeClass: 'active',
      hoverClass: 'highlight',
      drop: function(event, ui) {
        var dropped = $(this);
        var dragged = $(ui.draggable);
        $(function(index, item) {
          var test = '';
          array.push($(dragged).text());
          arraytext = JSON.stringify(array);
          test += "Index Value = " + $(dropped).index() + ", Text = " + $(dragged).text() + "<br/>";
          $('#test').html(test);
          $('#array').text(arraytext);
        });
      }
    });
  });
});

＆＃13;

#container {
  border: solid black 1px;
  margin: 0 auto;
  height: 800px;
}

#gridview {
  border: 2px solid #292da0;
  border-radius: 5px;
  background-color: #7577a3;
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-template-rows: auto;
  margin-left: 105px;
}

.target {
  border: 2px solid #1c1c3a;
  border-radius: 5px;
  background-color: #a7a7ef;
  padding: 1em;
}

#flex {
  border: 2px solid #292da0;
  border-radius: 5px;
  width: 100px;
  background-color: #7577a3;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
  float: left;
}

.item {
  border: 2px solid #1c1c3a;
  border-radius: 5px;
  background-color: #a7a7ef;
  padding: 1em;
}

.active {
  background-color: blue;
  color: white;
  border: 2px solid black;
}

.highlight {
  background-color: yellow;
  color: black;
  border: 2px solid blue;
}

.table {
  border: solid black 1px;
  width: 86px;
  padding: 5px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="container">
  Test:
  <div id="test">
  </div>
  Array:
  <div id="array">
  </div>
  <div id="gridview">
    <div class="target">Headers</div>
    <div class="target">with</div>
    <div class="target">different</div>
    <div class="target">column</div>
    <div class="target">names</div>
  </div>
  <span>
  <div id="flex">
    <div class="item">First Name</div>
    <div class="item">Last Name</div>
    <div class="item">Code</div>
    <div class="item">Date</div>
    <div class="item">Amount</div>
  </div>
   <table>
     <thead>
       <tr>
         <td class="table">Some</td>
         <td class="table">Column</td>
         <td class="table">Data</td>
         <td class="table">Goes</td>
         <td class="table">Here</td>
         </tr>
     </thead>
       <tr>
         <td class="table">Other Data</td>
         <td class="table">Other Data</td>
         <td class="table">Other Data</td>
         <td class="table">Other Data</td>
         <td class="table">Other Data</td>
       </tr>
   </table>
  </span>
</div>

＆＃13;

JSFiddle：https://jsfiddle.net/qxwzcn9w/4/

最终我会将索引值发送回数据库，以便在您发现任何红旗或“＃34;陷阱”时将奖励积分。谢谢！

Answer 1

我个人会使用一个对象而不是数组，并使用索引作为对象的键

  var cols ={};

  $('.target').droppable({
    .....
    drop: function(event, ui) {
      var txt = $(ui.draggable).text(),
          colIdx = $(this).index();
      // clear from any prior position
      $.each(cols, function(key, val){
         if (val === txt){
           cols[key] = null
         }
      });
      // add to new position
      cols[colIdx] = txt;           

    }
  }).each(function(i){
     // add each index as key in cols object
     cols[i] = null;
  });

如果你必须在后端有数组，那么在提交

之前将cols对象映射到数组很简单

的 DEMO

Answer 2

array.push($(dragged).text());

这一行将删除的列推入数组，而不是更新它。

您应首先在每个列标题的空值处初始化数组。

var arr = Array.apply(null, new Array(10)).map(Number.prototype.valueOf,0);
//console.log(arr) Outputs as [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

将数字更改为您拥有的列数。

要更改给定索引处的值，请执行以下操作：

arr[3]='a new value';
//console.log(arr) Outputs as [0, 0, 0, 'a new value', 0, 0, 0, 0, 0, 0]

Answer 3

使用for循环查找元素是否存在的简单解决方案。如果您对jQuery感到满意，也可以使用$.each()。如果需要，可以使用$("thead").find("td")计算表标题列来计算数组长度。然后像往常一样迭代查看元素是否存在，如果是，则删除它，然后插入适当的索引。

$(function() {
  $('.item').draggable({
    cursor: "crosshair",
    cursorAt: {
      left: 5
    },
    distance: 10,
    opacity: 0.75,
    revert: true,
    snap: ".target",
    containment: "window"
  });
});

$(function() {
  var arraytext = '';
  $('.target').droppable({
    accept: ".item",
    tolerance: 'pointer', 
    activeClass: 'active',
    hoverClass: 'highlight',
    drop: function(event, ui) {
      var dropped = $(this);
      var dragged = $(ui.draggable);
      $(function(index, item) {
        var test = '';

        for(var i = 0; i < array.length; i++)
        {
          if($(dragged).text() == array[i])
          {
            array[i] = "";
          }
        }
        array[$(dropped).index()] = $(dragged).text();
        arraytext = JSON.stringify(array);
        test += "Index Value = " + $(dropped).index() + ", Text = " + $(dragged).text() + "<br/>";
        $('#test').html(test);
        $('#array').text(arraytext);
      });
    }
  });
});

如果项目存在于该索引位置，如何更新javascript数组？

3 个答案: