我有一个电子商务网站，我正在尝试按州在美国设置运输区域。为此，我创建了一个拖放系统，其中有8个运输区域，您只需将状态拖动到适当的区域即可。
这是按预期的方式工作，但我有几个问题：
当您将一个状态拖到一个区域中并在其上拖动另一个状态时，它嵌套在该状态而不是放置区域中，因此有一种方法可以将其拖放到另一个状态中添加到父区域？ JS line 9-12
当我尝试将其发送到我的PHP脚本时，它没有被正确拾取。 Ajax位之前的console.log()显示了我想要的多维数组，但是我得到了post_set_blank空白响应。
为此，我的PHP脚本如下：
if(isset($_POST['shipping_zone_array']) && $_POST['shipping_zone_array']!=""){
echo 'session_set';
}else if(isset($_POST['shipping_zone_array'])){
echo 'post_set_blank';
}else{
echo 'not_posted';
}
对此将提供任何帮助或帮助。
function drag_start(event) {
event.dataTransfer.dropEffect = "move";
event.dataTransfer.setData("text", event.target.getAttribute('id'));
}
function drag_drop(event) {
event.preventDefault();
var elem_id = event.dataTransfer.getData("text");
if(event.target.className == 'states'){
console.log('in another state');
event.target.parent.appendChild(document.getElementById(elem_id));
}else{
event.target.appendChild(document.getElementById(elem_id));
}
}
var zone_1 = [];
var zone_2 = [];
var zone_3 = [];
var zone_4 = [];
var zone_5 = [];
var zone_6 = [];
var zone_7 = [];
var zone_8 = [];
var shipping_zone_array = [];
function readDropZone(){
var shipping_zones = document.getElementsByClassName("shipping_zone");
for(var i=1; i<=shipping_zones.length; i++){
var shipping_zone = document.getElementById("shipping_zone_"+i);
for(var j=1; j<=shipping_zone.children.length; j++){
alert(shipping_zone.children[j].id);
if(i==1){
zone_1.push(shipping_zone.children[j].id);
}else if(i==2){
zone_2.push(shipping_zone.children[j].id);
}else if(i==3){
zone_3.push(shipping_zone.children[j].id);
}else if(i==4){
zone_4.push(shipping_zone.children[j].id);
}else if(i==5){
zone_5.push(shipping_zone.children[j].id);
}else if(i==6){
zone_6.push(shipping_zone.children[j].id);
}else if(i==7){
zone_7.push(shipping_zone.children[j].id);
}else if(i==8){
zone_8.push(shipping_zone.children[j].id);
}
}
}
shipping_zone_array['zone_1'] = zone_1;
shipping_zone_array['zone_2'] = zone_2;
shipping_zone_array['zone_3'] = zone_3;
shipping_zone_array['zone_4'] = zone_4;
shipping_zone_array['zone_5'] = zone_5;
shipping_zone_array['zone_6'] = zone_6;
shipping_zone_array['zone_7'] = zone_7;
shipping_zone_array['zone_8'] = zone_8;
console.log(shipping_zone_array);
var formData = new FormData();
formData.append("shipping_zone_array", shipping_zone_array);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
if(this.responseText.includes('session_set')){
console.log('session_set');
}else if(this.responseText.includes('post_set_blank')){
console.log('post_set_blank');
}else if(this.responseText.includes('not_posted')){
console.log('not_posted');
}
}
};
xmlhttp.open("POST", "mypage.php", true);
xmlhttp.send(formData);
}.states{
display:inline-block;
background-color:#CCC;
border:1px solid #999;
border-radius:3px;
width:100px;
height:40px;
margin:5px;
padding:5px;
text-align:center;
vertical-align:middle;
cursor:move;
}
.shipping_zone{
display:inline-block;
background-color:#EEE;
border:1px solid #999;
border-radius:5px;
width:650px;
height:220px;
margin:5px;
padding:5px;
text-align:center;
vertical-align:middle;
}<table>
<tr>
<td>
<div id="shipping_zone_1" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 1<br /></div>
<div id="shipping_zone_2" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 2<br /></div>
<div id="shipping_zone_3" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 3<br /></div>
<div id="shipping_zone_4" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 4<br /></div>
<div id="shipping_zone_5" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 5<br /></div>
<div id="shipping_zone_6" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 6<br /></div>
<div id="shipping_zone_7" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 7<br /></div>
<div id="shipping_zone_8" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 8<br /></div>
</td>
<td>
<div id="AL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Alabama</div>
<div id="AK" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Alaska</div>
<div id="AZ" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Arizona</div>
<div id="AR" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Arkansas</div>
<div id="CA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">California</div>
<div id="CO" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Colorado</div>
<div id="CT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Connecticut</div>
<div id="DE" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Delaware</div>
<div id="FL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Florida</div>
<div id="GA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Georgia</div>
<div id="HI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Hawaii</div>
<div id="ID" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Idaho</div>
<div id="IL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Illinois</div>
<div id="IN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Indiana</div>
<div id="IA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Iowa</div>
<div id="KS" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Kansas</div>
<div id="KY" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Kentucky</div>
<div id="LA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Louisiana</div>
<div id="ME" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Maine</div>
<div id="MD" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Maryland</div>
<div id="MA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Massachusetts</div>
<div id="MI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Michigan</div>
<div id="MN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Minnesota</div>
<div id="MS" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Mississippi</div>
<div id="MO" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Missouri</div>
<div id="MT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Montana</div>
<div id="NE" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Nebraska</div>
<div id="NV" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Nevada</div>
<div id="NH" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New Hampshire</div>
<div id="NJ" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New Jersey</div>
<div id="NM" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New Mexico</div>
<div id="NY" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New York</div>
<div id="NC" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">North Carolina</div>
<div id="ND" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">North Dakota</div>
<div id="OH" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Ohio</div>
<div id="OK" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Oklahoma</div>
<div id="OR" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Oregon</div>
<div id="PA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Pennsylvania</div>
<div id="RI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Rhode Island</div>
<div id="SC" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">South Carolina</div>
<div id="SD" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">South Dakota</div>
<div id="TN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Tennessee</div>
<div id="TX" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Texas</div>
<div id="UT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Utah</div>
<div id="VT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Vermont</div>
<div id="VA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Virginia</div>
<div id="WA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Washington</div>
<div id="WV" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">West Virginia</div>
<div id="WI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Wisconsin</div>
<div id="WY" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Wyoming</div>
</td>
</tr>
</table>
<center>
<button onclick="readDropZone()">Get Object Data</button>
</center>
答案 0 :(得分：1)
您的运输区域HTML <div id="shipping_zone_1" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 1<br /></div>还包含一个<br>标签。
当您遍历孩子for(var j=1; j<=shipping_zone.children.length; j++) {时，您还会在children集合内遇到<br>标签。
然后当您要求该<br>标记的ID时，会收到一个错误消息，因为它们没有ID。结果是您的数组保持为空。
因此，要么过滤掉不是<div>标签的节点，要么使用其他数组创建方法。
我将使用一个简单的函数，即通过使用querySelector()在zone元素内查找所有类为.states的元素来立即选择正确的标签-并且仅选择正确的标签，而没有其他选择getElementById()中的区域，然后循环播放子级。
function drag_start(event) {
event.dataTransfer.dropEffect = "move";
event.dataTransfer.setData("text", event.target.getAttribute('id'));
}
function drag_drop(event) {
event.preventDefault();
var elem_id = event.dataTransfer.getData("text");
if(event.target.className == 'states'){
console.log('in another state');
event.target.parentElement.appendChild(document.getElementById(elem_id));
}else{
event.target.appendChild(document.getElementById(elem_id));
}
}
function get_states( zone_selector ) {
return Array
.from( document.querySelectorAll( `${ zone_selector } > .states`))
.map( state => state.id );
}
function readDropZone(){
var shippping_zones_object = {
"shipping_zone_1": get_states( '#shipping_zone_1' ),
"shipping_zone_2": get_states( '#shipping_zone_2' ),
"shipping_zone_3": get_states( '#shipping_zone_3' ),
"shipping_zone_4": get_states( '#shipping_zone_4' ),
"shipping_zone_5": get_states( '#shipping_zone_5' ),
"shipping_zone_6": get_states( '#shipping_zone_6' ),
"shipping_zone_7": get_states( '#shipping_zone_7' ),
"shipping_zone_8": get_states( '#shipping_zone_8' )
};
console.log( shippping_zones_object );
// Continue with AJAX.
}.states{
display:inline-block;
background-color:#CCC;
border:1px solid #999;
border-radius:3px;
x-width:100px;
x-height:40px;
margin:5px;
padding:5px;
text-align:center;
vertical-align:middle;
cursor:move;
}
.shipping_zone{
display:inline-block;
background-color:#EEE;
border:1px solid #999;
border-radius:5px;
x-width:650px;
x-height:220px;
margin:5px;
padding:5px;
text-align:center;
vertical-align:middle;
}<table>
<tr>
<td>
<div id="shipping_zone_1" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 1<br /></div>
<div id="shipping_zone_2" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 2<br /></div>
<div id="shipping_zone_3" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 3<br /></div>
<div id="shipping_zone_4" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 4<br /></div>
<div id="shipping_zone_5" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 5<br /></div>
<div id="shipping_zone_6" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 6<br /></div>
<div id="shipping_zone_7" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 7<br /></div>
<div id="shipping_zone_8" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 8<br /></div>
</td>
<td>
<div id="AL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Alabama</div>
<div id="AK" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Alaska</div>
<div id="AZ" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Arizona</div>
<div id="AR" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Arkansas</div>
<div id="CA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">California</div>
<div id="CO" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Colorado</div>
<div id="CT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Connecticut</div>
<div id="DE" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Delaware</div>
<div id="FL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Florida</div>
<div id="GA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Georgia</div>
<div id="HI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Hawaii</div>
<div id="ID" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Idaho</div>
<div id="IL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Illinois</div>
<div id="IN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Indiana</div>
<div id="IA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Iowa</div>
<div id="KS" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Kansas</div>
<div id="KY" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Kentucky</div>
<div id="LA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Louisiana</div>
<div id="ME" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Maine</div>
<div id="MD" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Maryland</div>
<div id="MA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Massachusetts</div>
<div id="MI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Michigan</div>
<div id="MN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Minnesota</div>
<div id="MS" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Mississippi</div>
<div id="MO" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Missouri</div>
<div id="MT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Montana</div>
<div id="NE" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Nebraska</div>
<div id="NV" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Nevada</div>
<div id="NH" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New Hampshire</div>
<div id="NJ" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New Jersey</div>
<div id="NM" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New Mexico</div>
<div id="NY" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New York</div>
<div id="NC" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">North Carolina</div>
<div id="ND" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">North Dakota</div>
<div id="OH" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Ohio</div>
<div id="OK" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Oklahoma</div>
<div id="OR" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Oregon</div>
<div id="PA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Pennsylvania</div>
<div id="RI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Rhode Island</div>
<div id="SC" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">South Carolina</div>
<div id="SD" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">South Dakota</div>
<div id="TN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Tennessee</div>
<div id="TX" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Texas</div>
<div id="UT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Utah</div>
<div id="VT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Vermont</div>
<div id="VA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Virginia</div>
<div id="WA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Washington</div>
<div id="WV" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">West Virginia</div>
<div id="WI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Wisconsin</div>
<div id="WY" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Wyoming</div>
</td>
</tr>
</table>
<button onclick="readDropZone()">Get Object Data</button>
PS ：如果您仍然想进行两个for循环，.children仅给我BR标签。如果要这样做，则需要在.childNodes内进行循环。
PPS ：如果设置shipping_zone_array['zone_1'] = zone_1;，从技术上讲，您希望将具有数组的对象作为属性，而不是多维数组。因此，请更改名称或使用正确的语法。
多数组为：
[
[ "IL", "MI" ],
[],
[],
[],
[],
[],
[],
[]
]
对象应为：
{
"zone_1': [ "IL", "MI" ],
"zone_2': [ "IL", "MI" ],
"zone_3': [ "IL", "MI" ],
"zone_4': [ "IL", "MI" ],
"zone_5': [ "IL", "MI" ],
"zone_6': [ "IL", "MI" ],
"zone_7': [ "IL', "MI" ],
"zone_8': [ "IL", "MI" ]
}