SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question HTML 5 drop event catching

    I am having problems with drop event catching with the html5 drag and drop.
    I am trying to listen for when an image is dropped into each seperate dropzone. I have an id for each dropzone & their value must go into the corresponding table in database. I have values going into the right table column in the database, but can't get each specific dropzones to listen for the drop event.

    Please help if you can, thank you.



    the html:
    HTML Code:
    <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>


    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();
    
    
    
         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);
    
    
    
        oldThis.style.borderColor = "#ccc";
    }, 500);
    
    return false;
    });


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

    ?>

  2. #2
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Does it have to be done with straight-up Javascript, or are you willing to use jQuery. If you use jQuery the same thing could be achieved in less than 5-10 lines of code, be crossbrowser, and work without fuss. If not, then I could try to step through the code and see what the issue is.

    By the way, what's the exact problem so I understand? You can't drag the images into the drop zone, or the drop zone doesn't recognize the drops? Do you want the images to actually stay inside the drop zone once their dropped...like this example:

    http://jqueryui.com/demos/droppable/#revert

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I am open to using jQuery but unsure how to catch the drop event and send it to the database.

    The drag and drop works, but I can't get the drop zone to recognize the drops. I want the image to stay inside the dropzone(I have that working) - but I am having trouble getting the "a id = "img1"" from the dropzone(when the image is dropped into it).

    Thank you

  4. #4
    SitePoint Member
    Join Date
    May 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have updated it to send the values to the database, but they are all going into the first drop zone field. And I need each dropzone value to go into the correct field in the database.

    I've tried putting in different listeners & if statements in the javascript but it won't work for me.

    Code:
     
    
    var y = 'drop_zone1='+iObj; 
    
    var x = 'drop_zone2='+iObj; 
    
    var z = 'drop_zone3='+iObj; 
    
    
    
    var u = $('drop_zone1'); 
    
    var t = $('drop_zone2'); 
    
    var r = $('drop_zone3'); 
    
    
    if(u){ 
    $.post("post.php", y); 
    }; 
    
    
    if(t){ 
    $.post("post.php", x); 
    };
    
    
    if(r){ 
    $.post("post.php", z); 
    };
    and my php:

    Code:
    if(isset($_POST['drop_zone1'])){
    
    
    
    
     
      $sql2="INSERT INTO table_answers (drop_zone1) VALUES ('$_POST[drop_zone1]')";
    }
    
    
    if(isset($_POST['drop_zone2'])){
    
    
    
    
     
      $sql="INSERT INTO table_answers (drop_zone2) VALUES ('$_POST[drop_zone2]')";
    }



    Any idea please?

  5. #5
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That code you gave me was confusing. Is this what you're trying to do? http://jsfiddle.net/OMGCarlos/bUsQt/

    Check it out and see if it works for you. You might need to change the PHP slightly.

  6. #6
    SitePoint Guru Jason__C's Avatar
    Join Date
    Oct 2009
    Location
    Racoon City
    Posts
    660
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sure, you can do it in jQuery, but where is the fun in that?
    Chuck Norris is so tough,
    mosquitos ask for permission before they bite him

  7. #7
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    wha wha whaaat!? Dontcha know how fun jQuery is!?

    delray I forgot, if you use a method similar to this one then you'll need to loop through each $_POST like this:

    Code:
    foreach($_POST['drop_zone1']){
       $sql ....
    }
    Also, don't forget to clean the $_POST with something like "mysql_real_escape_string", or your database is at risk.

  8. #8
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,080
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by delray View Post
    Code:
     
    var u = $('drop_zone1'); 
    
    var t = $('drop_zone2'); 
    
    var r = $('drop_zone3'); 
    
    
    if(u){ 
    $.post("post.php", y); 
    }; 
    
    
    if(t){ 
    $.post("post.php", x); 
    };
    
    
    if(r){ 
    $.post("post.php", z); 
    };
    This bit isn't making any sense. All it does is make jQuery objects for the tags drop_zone1, drop_zone2 and drop_zone3. None of these exist (I hope!) so none of the events fire.

    What you want to do instead is check the variable oldThis, and which id it has, and then use that to determine what AJAX call you make.

    Code javascript:
    for (var j=1; j<=3; j++) {
      j = String(j);
      if($(oldThis).is("#drop_zone" + j)) { 
        $.post("post.php", "drop_zone" + j + "=" + iObj); 
      };
    }
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  9. #9
    SitePoint Member
    Join Date
    May 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your replies and help. I managed to get it working the way Scallio specified.


Tags for this Thread

Bookmarks

Posting Permissions

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