Question

我无法将数据发送到数据库。这些值正在发送，但它们都进入第一个放置区域字段。我需要每个dropzone值进入数据库中的正确字段。

我试过投入不同的听众和如果javascript中的语句，但它不适合我。

html：

<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]')";

请问好吗？

Answer 1

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

（我假设这是jQuery。）

将#添加到选择器的开头：$('#drop_zone1');。
jQuery结果集始终计算为真值。我不清楚你在这里要验证的条件是什么......

在PHP代码中，您在第一个$sql2中的if中创建了查询，而在另外两个$sql中创建了查询。

< / LI>

编辑 - 既然我们知道你在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并使用预准备语句，而不是盲目地将用户输入插入查询中。如果您想学习，here is a quite good PDO-related tutorial。

Javascript事件 - 将值发送到数据库

1 个答案: