JavaScript Drag/Drop a Div on a Web Page

Question

I am trying to code up some JavaScript that will allow me to move a div on a web page. That is, I want to make it so that you can click and drag a div from one location on the page to another. My JavaScript doesn't seem to be cooperating. However, I feel like I am making a very simple error. Perhaps another pair of eyes can find my problem(s)?

Any comments are appreciated.

Below is my JS, CSS, and HTML:

JavaScript:

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

function grabCalculator(e) {
    var evt = e || window.event;
    calculator = evt.target || evt.srcElement;
    var mousex = evt.clientX;
    var mousey = evt.clientY;
    diffx = parseInt(calculator.style.left) + mousex;
    diffy = parseInt(calculator.style.top) + mousey;
    addEvent(document, "mousemove", moveCalculator, false);
    addEvent(document, "mouseup", dropCalculator, false);
}

function moveCalculator(e) {
    var evt = e || window.event;
    var mousex = evt.clientX;
    var mousey = evt.clientY;
    calculator.style.left = mousex + diffx + "px";
    calculator.style.top = mousey + diffy + "px";
}

function addEvent(obj, eventType, fnName, cap) {
                            alert("TEST");
    if (obj.attachEvent) {
        obj.attachEvent("on" + eventType, fnName);
    } else {
        obj.addEventListener(eventType, fnName, cap);
    }
}

function removeEvent(obj, eventType, fnName, cap) {
    if (obj.attachEvent) {
        obj.detachEvent("off" + eventType, fnName);
    } else {
        obj.removeEventListener(eventType, fnName, cap);
    }
}

function dropCalculator(e) {
    removeEvent(document, "mousemove", moveCalculator, false);
    removeEvent(document, "mouseup", dropCalculator, false);
}

function init() {
    diffx = null;
    diffy = null;

    calculator = document.getElementById("calculator");

    //store top and left values of calculator
    calculator.style.top = getStyle(calculator, "top");
    calculator.style.left = getStyle(calculator, "left");
    calcButtonState = true;
}

window.onload = init;

CSS:

#calculator
{
position: absolute;
z-index: 1;
left: 37%;
top: 25%;
border: solid;
border-color: red;
background: black;
width: 25%;
height: 45%;
}

This is only the relevant CSS.

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css">
        <script type="text/javascript" src="javascript.js"></script>
    </head>

<body>

    <div id="main">

        <!--Calculator-->
        <div id="calculator">
        </div>
        <!--End calculator-->

        <header>

            <div id="title">
                Conversion Formulas
            </div>

        </header>

        <nav>
        </nav>

        <div id="content">

            <div id="dryMeasureContent">
            </div>

            <div id="wetMeasureContent">
            </div>

            <div id="distanceContent">
            </div>

            <div id="temperatureContent">
            </div>

        </div>

        <footer>
        </footer>

    </div>

</body>
</html>

Note that my other HTML tags are in place, however, stackoverflow doesn't seem to handle HTML very well so they do not appear.

I always ask that people put their JS/HTML/CSS in a fiddle over at http://jsfiddle.net/ — Jazzepi, Apr 02 '13 at 22:20

score 1 · Accepted Answer · answered Apr 02 '13 at 22:31

1

first of all, your init() function doesn't add any event listeners - this is the issue

try to add addEvent(calculator, 'mousedown', moveCalculator); after this line

calculator = document.getElementById("calculator");

i hope you understood my idea

answered Apr 02 '13 at 22:31

dimaninc

765
5
16

Success! Wow, so stupid of me. XD The calculator now drags and can be replaced. However, it now seems to jump away from the cursor when dragged. – Lethal Left Eye Apr 02 '13 at 22:36
I actually changed it to addEvent(calculator, 'mousedown', grabCalculator); – Lethal Left Eye Apr 02 '13 at 22:37
about jumping from cursor - print live coordinates in a div on your page and try to catch a moment when coords get changed with a big amount also consider scrollLeft/scrollTop and other coord corrections – dimaninc Apr 02 '13 at 22:43
It has something to do with my code in grabCalculator() and in moveCalculator(). I found that changing it from "+ mousex and + mousey" in grabCalculator() to "/ mousex and / mousey." It works much better. Still not perfect, however. – Lethal Left Eye Apr 02 '13 at 22:45

score 0 · Answer 2 · answered Apr 02 '13 at 22:26

0

Have you looked at the jquery library draggable http://jqueryui.com/draggable/ and droppable http://jqueryui.com/droppable/ ?

I've used these libraries with great success.

Super super easy to implement.

answered Apr 02 '13 at 22:26

Kevin Mansel

2,351
1
16
15

My solution to this problem has to be more "from scratch" than using the libraries at my disposal, unfortunately. :/ – Lethal Left Eye Apr 02 '13 at 22:27
man that's a bummer :P – Kevin Mansel Apr 02 '13 at 22:31

score -1 · Answer 3 · answered Apr 02 '13 at 22:31

W3Schools has a great tutorial on drag and drop just using HTML5 and javascript.

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev){
  ev.preventDefault();
}

function drag(ev){
  ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev){
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

   <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

JavaScript Drag/Drop a Div on a Web Page

3 Answers3