Home/ Questions/Q 7609907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T01:17:27+00:00

I’m trying to create some draggable boxes in javascript. I decided to make an

  • 0

I’m trying to create some draggable boxes in javascript. I decided to make an empty class “draggable” in CSS and a “box” class. The code is as follows:

<!DOCTYPE html>
<html>

<head>
    <style>
    .draggable
    {

    }
    .box
    {
        position: absolute;
        width: 80px; height: 60px;
        padding-top: 10px;
        text-align: center;
        font-size: 40px;
        background-color: #222;
        color: #CCC;
    }
    </style>
</head>

<body>
<div class="draggable box">1</div>
<div class="draggable box">2</div>
<div class="draggable box">3</div>
<script>
    var draggableStuff = document.querySelectorAll('draggable');
    var tabLength = draggableStuff.length;
    alert(tabLength);
</script>
</body>

The problem is that tabLength is always zero. I want to get an array filled with all draggable stuff. I’m new to javascript. What have I missed here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You want to select elements by class, so don’t forget about the dot:

    var draggableStuff = document.querySelectorAll('.draggable');

    Another option is to use document.getElementsByClassName:

    var draggableStuff = document.getElementsByClassName('draggable');
    • 0