Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy HTML5 API drag and drop images

    I am having a problem sending info to a database. I have set up drag and drop with HTML5 and it is working, but I need to be able to get the values of the images uploaded to the database when each one is dropped into a dropzone. I don't need to upload the images to the database - just need the value of each image sent to it.

    Here is the HTML:
    Code:
    <ul id="images">
      <li><a id="1" draggable="true"><img src="images/1.jpg" value = "flower"></a></li>
      <li><a id="2" draggable="true"><img src="images/2.jpg" value = "boy"></a></li>
      <li><a id="3" draggable="true"><img src="images/3.jpg" value = "girl"></a></li>
    </ul>
    
    <form name = "objects" id="form" action = "form.php" method = "post">
    
    <div class="drop_zones">
      <div class="drop_zone" id="drop_zone1" droppable="true" type = "text" name =    "drop_zone1">
      </div>
    
      <div class="drop_zone" id="drop_zone2"  droppable="true" type = "text" name = "drop_zone2">
      </div>
    
      <div class="drop_zone" id="drop_zone3" droppable="true" type = "text" type = "file" name = "drop_zone3">
      </div>
    </div>

    and the javascript
    Code:
    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();
    
        // little customization
        oldThis.style.borderColor = "#ccc";
    }, 500);
    
    return false;
    });


    and the php
    PHP Code:
    <?php 

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

    if (!
    mysql_query($sql,$db))
    {
        die(
    'Error: ' mysql_error());
    }

    echo 
    $_POST["drop_zone1"]; 
    echo 
    $_POST["drop_zone2"]; 
    echo 
    $_POST["drop_zone3"]; 

    ?>

    There is no error, it is not registering that there is something in the dropzone - nothing is being sent through the php. I have tried doing it with just text(instead of the image) and that won't work either. I am unsure of how to target the value of each image through javascript/php.

    Please help if you can,
    Thanks
    Last edited by funkysoulbrotha; 05-16-2012 at 03:13 PM.

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    My JS is poor at best so I can't really help with that.
    Add a simple print_r($_POST); into the php script. Does that show anything inside the array (I noticed you have the explicit prints as well, same deal there, but this way you can see if its under any property at all)?

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    No that doesn't work, but thank you anyway

  • #4
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Quote Originally Posted by funkysoulbrotha View Post
    No that doesn't work, but thank you anyway
    Then the problem will be with the JS code not passing the post to the PHP page. I don't see here how it does it at all; the form doesn't contain any fields and has no submit button, but that JS doesn't appear to pass anything either via AJAX or anything of the sorts. I don't know what event.dataTransfer is here, so I'm not sure if that's what's passing the data.
    In any case, it looks to me that the JS will be the issue here.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •