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 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Html5 drag and drop images, send values to database

    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

  • #2
    New Coder
    Join Date
    Mar 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anyone have any idea how to store the value that I give for the image & then send it to the database? Please help!

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,762
    Thanks
    55
    Thanked 517 Times in 514 Posts
    can an image have a value? I thought values were only for form fields, buttons, etc. I would test this before going much further:
    Code:
    <img src="images/1.jpg" value = "flower" onclick="alert(this.value)">
    and probably use an ID instead

    on that topic, the IDs for your "a" tags are illegal - IDs shouldn't start with a number, amongst other things.

    dunno if that helps, but it will probably come in useful at some point...

  • Users who have thanked xelawho for this post:

    funkysoulbrotha (05-17-2012)

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks, that's one part of the puzzle solved.

    Now I need to be able to get javascript to listen for when it is dropped & try to send the id via php to the database.

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have added a httprequest to post the values to the database, but am unsure how to listen for each seperate dropzone??

    Code:
          var http = new XMLHttpRequest();
          var url = "post.php";
     
          var params = 'drop_zone1='+iObj;//sends data to the specific column in database table
        
        
          http.open("POST", url, true);
    
       
         http.onreadystatechange = function() {
    	if(http.readyState == 4 && http.status == 200) {
    		alert(http.responseText);
    	}
    }
    http.send(params);

    Please help if you can, thanks

  • #6
    New Coder
    Join Date
    Mar 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anyone have a solution for catching the drop event in javascript?...please


  •  

    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
    •