1

データベースにデータを送信できません。値は送信されていますが、それらはすべて最初のドロップ ゾーン フィールドに入ります。そして、各 dropzone 値がデータベースの正しいフィールドに入る必要があります。

JavaScriptにさまざまなリスナーとifステートメントを入れてみましたが、うまくいきません。

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

何かアイデアはありますか？

4

1 に答える 1

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

（これはjQueryだと思います。）

  1. #をセレクターの先頭に追加します: $('#drop_zone1');.

  2. jQuery の結果セットは、常に真の値に評価されます。ここで検証しようとしている条件が明確ではありません...

  3. PHP コードでは、他の 2つではなく$sql2、最初の でクエリを作成しています。if$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);

ドロップされたすべての要素を一度に送信するためのもう 1 つの編集:

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 関連の非常に優れたチュートリアルがあります。

于 2012-05-19T15:05:49.423 に答える