How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Question

How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again.

View the DEMO here.

Challenge Description:-

I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the action if the target box already contains the cross sign.

Is there a way to achieve this using only HTML and plain Javascript?

javascript html css

Answer 1

Answer №1

Check out the modified JSFiddle link here: http://jsfiddle.net/wz4hs9qa/2/

Here are the key updates made to your code:

1) Assigned a unique id to each cell based on its index:

cell.id = "cell_" + i;

2) Corrected a typo in the code:

on_drop.value = "drop(event, this)";

3) Moved the ondragover attribute from X inside the cell to the cell itself. Enabling dropping on empty cells is crucial.

var on_dragover = document.createAttribute('ondragover');
on_dragover.value = "allowDrop(event, this)";
cell.setAttributeNode(on_dragover);

4)

a) Provided each X with an id similar to its containing cell's id for proper handling by the drop event.

b) Added an ondragstart handler to save the index in the drag-and-drop dataTransfer object for both newer and older browsers.

function createX(obj){
    if (obj.innerHTML == ''){
        var id = obj.id.replace("cell", "X");
        obj.innerHTML = "<h1 id='" + id + "' style='text-align:center;' draggable='true' ondragstart='saveCell(event, this);'>X</h1>";
    } else {
        obj.innerHTML = "";
    }
}

function saveCell(ev, obj) {
    var cell_index = obj.id.substring(2);
    try {
        ev.dataTransfer.setData("text/plain", cell_index);
    } catch (exception) {
        ev.dataTransfer.setData("text", cell_index);
    }
}

5) Removed the line that cleared X on every drop as it conflicted with the desired behavior:

function allowDrop(ev, obj) {
    ev.preventDefault();
    //obj.innerHTML = '';
}

6) Enhanced the drop() function to:

a) Prevent dropping when a cell already contains an X

b) Place an X in the target cell

c) Retrieve the cell index from dataTransfer to clear the source cell

function drop(ev, obj) {
    ev.preventDefault();

    if (obj.innerHTML !== '') { // not empty
        return false;
    } else {
        createX(obj);
    }

    var data;
    try {
        data = ev.dataTransfer.getData("text/plain");
    } catch (exception) {
        data = ev.dataTransfer.getData("text");
    }
    var cell_id = "cell_" + data;
    document.getElementById(cell_id).innerHTML = '';
}

Answer 2

Check out the modified JSFiddle link here: http://jsfiddle.net/wz4hs9qa/2/

Here are the key updates made to your code:

1) Assigned a unique id to each cell based on its index:

cell.id = "cell_" + i;

2) Corrected a typo in the code:

on_drop.value = "drop(event, this)";

3) Moved the ondragover attribute from X inside the cell to the cell itself. Enabling dropping on empty cells is crucial.

var on_dragover = document.createAttribute('ondragover');
on_dragover.value = "allowDrop(event, this)";
cell.setAttributeNode(on_dragover);

4)

a) Provided each X with an id similar to its containing cell's id for proper handling by the drop event.

b) Added an ondragstart handler to save the index in the drag-and-drop dataTransfer object for both newer and older browsers.

function createX(obj){
    if (obj.innerHTML == ''){
        var id = obj.id.replace("cell", "X");
        obj.innerHTML = "<h1 id='" + id + "' style='text-align:center;' draggable='true' ondragstart='saveCell(event, this);'>X</h1>";
    } else {
        obj.innerHTML = "";
    }
}

function saveCell(ev, obj) {
    var cell_index = obj.id.substring(2);
    try {
        ev.dataTransfer.setData("text/plain", cell_index);
    } catch (exception) {
        ev.dataTransfer.setData("text", cell_index);
    }
}

5) Removed the line that cleared X on every drop as it conflicted with the desired behavior:

function allowDrop(ev, obj) {
    ev.preventDefault();
    //obj.innerHTML = '';
}

6) Enhanced the drop() function to:

a) Prevent dropping when a cell already contains an X

b) Place an X in the target cell

c) Retrieve the cell index from dataTransfer to clear the source cell

function drop(ev, obj) {
    ev.preventDefault();

    if (obj.innerHTML !== '') { // not empty
        return false;
    } else {
        createX(obj);
    }

    var data;
    try {
        data = ev.dataTransfer.getData("text/plain");
    } catch (exception) {
        data = ev.dataTransfer.getData("text");
    }
    var cell_id = "cell_" + data;
    document.getElementById(cell_id).innerHTML = '';
}

How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Answer №1

Similar questions

The relentless Livewire Event Listener in JavaScript keeps on running without pausing

extract objects from an array of objects based on a specified array

How can one utilize electron's webContents.print() method to print an HTML or text file?

Validating Two DateTime Pickers as a Group with Javascript in asp.net

The battle of line-height versus padding for achieving vertical centering with one-lined text

Retrieving data from radio buttons using React Hook Form

Issues with PHP Form Email DeliveryIt seems that there is a

Enhanced Firefox functionality with support for multiple columns

Having trouble with the move_uploaded_file function in PHP?

Is there a way to make a single background image the frame for each individual post on a tumblr theme?

The process of making a pop-up modal instead of just relying on alerts

When running the command "npx create-next-app@latest --ts," be aware that there are 3 high severity vulnerabilities present. One of the vulnerabilities is that "node-fetch

Search for specific parameters in an array and retrieve them

What is the most elegant way to retrieve a new item from Firebase and read it?

Sizing labels for responsive bar charts with chart.js

Effective ways to check for the time discrepancy between dates in moment.js

How can I make tooltipster display tooltips properly?

Avoid unnecessary renders by only updating state if it has changed from the previous state

Incorporating an HTTP header into d3.json using queue.js

Tips for extracting JSON data from an API with identical names as values