Results 1 to 2 of 2

Thread: Drag and Drop Javascript Code Help

  1. #1
    Join Date
    Mar 2011

    Drag and Drop Javascript Code Help

    Hi guys,

    I am a student currently learning html, css, and javascript. I am trying to learn how to use the event model. I am following this tutorial in a textbook, but even after copying straight from it, I still am unable to make the code work. What I am trying to do is make a drag and drop div containers that I can move freely around the page. When I test it out on any web browser, the pictures don't move at all. This has frustrated me the whole day because I honestly don't know what else is wrong with the code. The following is the javascript code for the tutorial. Could someone more experienced check out what I have so far and see what I am doing wrong?

    (before you read, the tutorial in the book is making a puzzle piece game, hence the use of arrays for multiple pictures. I didn't want to take away any part out just in case it may be part of the issue at hand.)

    var grids = new Array();
    var pieces = new Array();
    var mousePiece = null;
    var diffX = null;
    var diffY = null;

    window.onload = init;

    function init() {

    var allElem = document.getElementsByTagName("*");

    for (var i = 0; i < allElem.length; i++) {
    if (allElem[i].className == "grid") grids.push(allElem[i]);
    if (allElem[i].className == "pieces") pieces.push(allElem[i]);

    for(var i = 0; i < pieces.length; i++){
    pieces[i].style.backgroundImage = "url(piece" + i + ".jpg)";
    pieces[i].style.top = getStyle(pieces[i],"top");
    pieces[i].style.left = getStyle(pieces[i],"left");
    pieces[i].style.width = getStyle(pieces[i],"width");
    pieces[i].style.height = getStyle(pieces[i],"height");

    addEvent(pieces[i], "mousedown", mouseGrab, false);

    for(var i = 0;i < grids.length; i++){
    grids[i].style.top = getStyle(grids[i],"top");
    grids[i].style.left = getStyle(grids[i],"left");
    grids[i].style.width = getStyle(grids[i],"width");
    grids[i].style.height = getStyle(grids[i],"height");

    function mouseGrab(e){
    var evt = e || window.event;
    mousePiece = evt.target || evt.srcElement;

    var mouseX = evt.clientX; // x coord pointer
    var mouseY = evt.clientY; // y coord pointer

    /*get the difference from pointer to corner of piece*/
    diffX = parseInt(mousePiece.style.left) - mouseX;
    diffY = parseInt(mousePiece.style.top) - mouseY;

    addEvent(document, "mousemove", mouseMove, false);

    function mouseMove(e){
    var evt = e || window.event;
    var mouseX = evt.clientX; // x coord pointer
    var mouseY = evt.clientY; // y coord pointer

    mousePiece.style.left = mouseX + differX + "px";
    mousePiece.style.top = mouseY + diffY + "px";

    function mouseDrop(e){

    function getStyle(object, styleName) {
    if (window.getComputedStyle) {
    return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
    } else if (object.currentStyle) {
    return object.currentStyle[styleName]

    function addEvent(object, evName, fnName, cap){
    object.attachEvent("on" + evName, fnName);
    else if(object.addEventListener)

    function removeEvent(object, evName, fnName, cap){
    object.detachEvent("on" + evName, fnName);
    else if(object.removeEventListener)

  2. #2
    Join Date
    Oct 2003
    Andover, UK
    Do you get any errors in the error console when you run this? Is there any reason you're avoiding something like jQuery? That would give you drag functionality and reduce your code massively.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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