Javascript 事件 - 将值发送到数据库 - Javascript events - send values to database

>我在将数据发送到数据库时遇到问题。正在发送值，但它们都将进入第一个放置区字段。我需要每个放置区值进入数据库中的正确字段。

我

尝试在javascript中放入不同的侦听器和if语句，但它对我不起作用。

该网页：

<ul id="images">
<li><a id="img1" draggable="true"><img src="images/1.jpg"></a></li>
<li><a id="img2" draggable="true"><img src="images/2.jpg"></a></li>
<li><a id="img3" draggable="true"><img src="images/3.jpg"></a></li>
</ul>
//dropzones

<div class="drop_zones">
<div class="drop_zone" id="drop_zone1" droppable="true">
</div>
<div class="drop_zone" id="drop_zone2"  droppable="true">
</div>
<div class="drop_zone" id="drop_zone3" droppable="true">
</div>
</div>
   <button id = "post" onClick="postdb();">Post info</button>

JavaScript：

var addEvent = (function () {
    if (document.addEventListener) {
        return function (el, type, fn) {
            if (el && el.nodeName || el === window) {
                el.addEventListener(type, fn, false);
            } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            }
        };
    } else {
        return function (el, type, fn) {
            if (el && el.nodeName || el === window) {
                el.attachEvent('on' + type, function () {
                    return fn.call(el, window.event);
                });
            } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            }
        };
    }
})();
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');
function cancel(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}
function updateDataTransfer() {
    dragItems = document.querySelectorAll('[draggable=true]');
    for (var i = 0; i < dragItems.length; i++) {
        addEvent(dragItems[i], 'dragstart', function (event) {
            event.dataTransfer.setData('obj_id', this.id);
            return false;
        });
    }
}
addEvent(dropAreas, 'dragover', function (event) {
    if (event.preventDefault)
        event.preventDefault();
    this.style.borderColor = "#000";
    return false;
});
addEvent(dropAreas, 'dragleave', function (event) {
    if (event.preventDefault)
        event.preventDefault();
    this.style.borderColor = "#ccc";
    return false;
});
addEvent(dropAreas, 'dragenter', cancel);
// drop event handler
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault)
        event.preventDefault();
    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);
    // get its image src
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';
    var oldThis = this;
    setTimeout(function () {
        oldObj.parentNode.removeChild(oldObj); // remove object from DOM
        // add similar object in another place
        oldThis.innerHTML += '<a id="' + iObj + '" draggable="true"><img src="' + oldSrc + '" />      </a>';
        // and update event handlers
        updateDataTransfer();

function postdb(){
if (document.querySelectorAll('[droppable=true]')){

     var dropDetails = oldThis.id + '=' + iObj;

     $.post("a-2.php", dropDetails);
   }

        oldThis.style.borderColor = "#ccc";
    }, 500);
    return false;
});

和我的PHP：

 $sql="INSERT INTO table_answers (drop_zone1, drop_zone2, drop_zone3) VALUES         ('$_POST[drop_zone1]','$_POST[drop_zone2]','$_POST[drop_zone3]')";

请问有什么想法吗？

var u = $('drop_zone1'); 
if(u){ 
  $.post("post.php", y); 
};

(我假设这是jQuery。

将#添加到选择器的开头：$('#drop_zone1'); 。
jQuery 结果集的计算结果始终为真实值。我不清楚你在这里试图验证什么条件......
在 PHP 代码中，您将在第一个if中以$sql2创建查询，而不是在其他两个$sql中创建查询。

编辑 - 现在我们知道您要在 setTimeout 中执行的操作，这个简化的函数应该可以工作：

setTimeout(function() {
    oldObj.parentNode.removeChild(oldObj); // remove object from DOM
    // add similar object in another place
    oldThis.innerHTML += '<a id="' + iObj + '" draggable="true"><img src="' + oldSrc + '" />      </a>';
    // and update event handlers
    updateDataTransfer();
/*
    this part has been removed, see edit below
    var dropDetails = oldThis.id + '=' + iObj;
    // now dropDetails should look something like "drop_zone1=img1"
    $.post("post.php", dropDetails);
*/
    oldThis.style.borderColor = "#ccc";
}, 500);

再进行一次编辑，一次提交所有删除的元素：

function postdb() {
  var postDetails = {};
  var dropZones = document.querySelectorAll('[droppable=true]');
  var allZonesDropped = true;
  for(var ix = 0; ix < dropZones.length; ++ix) {
    var zone = dropZones[ix];
    var dropped = zone.querySelector('[draggable=true]');
    if(dropped) {
      var dropTag = dropped.id;
      postDetails[zone.id] = dropTag;
    } else {
      allZonesDropped = false;
    }
  }
  if(allZonesDropped) {
    $.post("a-2.php", dropDetails);
  } else {
    alert('Not all targets have elements in them');
  }
  return false;
});

请注意您放置此功能的位置 - 您编辑的问题将其放在setTimeout调用的中间，它绝对不起作用。

关于你的PHP代码：你应该真正了解PDO或MySQLi并使用预准备语句，而不是盲目地将用户输入插入查询中。如果你想学习，这里有一个非常好的PDO相关教程。