My javascript breaks when I split a class into two classes

I'm currently making a Drag-and-Drop javascript engine. I want to make one class (.drag) the bare-minimum the element must have to be "drag-able". Currently my .drag class in css has some extra stuff in it and I want to split it into two classes. However, when I split the class, the object I wish to drag is no longer "drag-able".

Currently:

.drag {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    cursor:move;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

And I would like to have two classes:

.drag {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.square {
    width: 100px;
    height: 100px;
    background开发者_StackOverflow: red;
    cursor:move;
}

HTML changes from:

<p class="drag">Thing One</p>
<p class="drag">Thing Two</p>

To:

<p class="drag square">Thing One</p>
<p class="drag square">Thing Two</p>

And here is the javascript:

// JavaScript Document

var posX;
var posY;
var element;
var currentPos;

document.addEventListener("mousedown", drag, false);

function drag(event) {
    if(event.target.className == "drag") {
        element = event.target;
        element.style.zIndex="100";
        currentPos = findPos(element);
        posX = event.clientX -currentPos.x; //-parseInt(element.offsetLeft);
        posY = event.clientY -currentPos.y; //-parseInt(element.offsetTop);
        document.addEventListener("mousemove", move, false);
    }
}

function move(event) {

    if (typeof(element.mouseup) == "undefined")
        document.addEventListener("mouseup", drop, false);
    //Prevents redundantly adding the same event handler repeatedly

    element.style.left = event.clientX - posX + "px";
    element.style.top = event.clientY - posY + "px";
}

function drop() {
    element.style.zIndex="1";
    document.removeEventListener("mousemove", move, false);
    document.removeEventListener("mouseup", drop, false);
    //alert("DEBUG_DROP");
}    

function findPos(obj) { // Donated by `lwburk` on StackOverflow
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
}

Why won't the elements drag when I split the class? How do I fix it?

Thank you so much for reading and helping! I greatly appreciate it.

Your conditional has event.target.className == "drag" but this is no longer true as now it == "drag square". What you want is something like:

event.target.className.search(/\bdrag\b/) > -1

for your conditional.

I suspect the line if(event.target.className == "drag") { will pull back "drag square" now - you should split the className on space and check to see if any of the classes are "drag".

In your drag function you say:

event.target.className == "drag"

Could the issue be that once you have multiple classes on the element that the className no longer equals "drag" but is now the superset of classes "drag square". You could try doing a search on the className to find if one of the classes is "drag" instead of only drag.