7
jQueryとJavaScriptにかなり新しいので優しくしてください...アイテムがそのインデックス位置にある場合、javascript配列を更新するには？
私には、ユーザーが「列ヘッダー」のリストをドラッグ＆ドロップすることができますここで、「列マッピング」ページを作成するために、POCに取り組んでいます新しい列見出しのグリッド。私はSQLデータベースに返すことができる配列を構築する必要があります。私はこの部分（ほとんど）が私の好きなように機能しています。
アイテムを左側の列リストから右側のヘッダーグリッドにドラッグすると、そのアイテムが存在する場合、コードはそのインデックスの配列アイテムを更新または置換する必要があります。アイテムが存在しない場合は、アイテムを配列に追加する必要があります。
例： "First Name"を "Headers"にドラッグすると、インデックス位置0に追加する必要があります。次に、 "First Name"を "with"にドラッグすると、インデックスの "First Name" 0を入力し、位置1に値を追加します。次に、「姓」を「with」にドラッグすると、位置1の配列が「姓」の値で更新されます。
$(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);
});
}
});
});
});#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;
}<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>JSFiddle：あなたは任意の赤い旗や「落とし穴」に気づいたらhttps://jsfiddle.net/qxwzcn9w/4/
は最終的に私はボーナスポイントして戻ってデータベースにインデックス値を送信します。ありがとう！
提出配列に値をプッシュします。代わりにso：array [index] = valueのような値を追加すると、必要なものが得られます。割り当てられた値の間の割り当てられていないインデックスは自動的に未定義に設定されるため、データベースは予想よりも短い配列とともにそれを処理する必要があります。 – Chairs
アイデア：どの要素が配置されているかをチェックして、配列に "First Name"の値が0の配列を設定した場合（ "First First Element"）、 "First Name" "First Name"の値は1に設定されます。そして、送信ボタンのあとで配列から位置を読み取り、dbに送信します。私はこれが理解できることを願っています^^ –
@ Chairs回答に感謝します。私はあなたが解決策にいると思います。 gridview divの要素の数に基づいて、いくつかのインデックス/空の文字列を持つ配列を作成する方法はありますか？ –