Learn how to utilize Javascript to easily drag and drop an image within the same block

Question

Learn how to utilize Javascript to easily drag and drop an image within the same block

I am encountering an issue with dragging and dropping images or swapping them using JavaScript. I have tried to implement this in the code below, where clicking on icons moves them onto a colored div. However, I am now trying to drag and drop the images within the div or even swap them around. I am struggling to achieve this. Can someone please assist me with this task?

Thank you in advance.

This is the code I have:

function changeHome() {
  document.getElementById('color').style.backgroundColor = "coral";
}

function changeGray() {
  document.getElementById('color').style.backgroundColor = "gray";
}

function changeRed() {
  document.getElementById('color').style.backgroundColor = "red";
}

function changeGreen() {
  document.getElementById('color').style.backgroundColor = "green";
}

function changeBlue() {
  document.getElementById('color').style.backgroundColor = "blue";
}

$(document).ready(function() {
  $('.image').click(function() {
    var srcimg = $(this).attr('src');
    $('#color').append("<img src=" + srcimg + "  width='70' height='70'>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<div class="container">
  <h1 align="center"><u> JavaScript Simple learning </u></h1>
  <h3 align="center"> Use of JavaScript to drag and drop icons in Background image </h3>
  <br/> <br/>
  <div class="col-md-10">
    <div id="color">
    </div>
  </div>
  <div class="col-md-2">
    <button onclick="changeHome()"> Home Color  </button> <br/><br/><br/>
    <button onclick="changeGray()"> Click for Gray </button> <br/><br/>
    <button onclick="changeRed()"> Click for Red </button> <br/><br/>
    <button onclick="changeGreen()"> Click for Green </button> <br/><br/>
    <button onclick="changeBlue()"> Click for Blue </button> <br/><br/>
  </div>
</div>
<div class="container">
  <h2><u> List of Icons </u></h2>
  <img class="image" src="images/fb.jpeg" width="70" height="70" />
  <img class="image" src="images/twitter.jpeg" width="70" height="70" />
  <img class="image" src="images/linkedin.jpeg" width="70" height="70" />
  <img class="image" src="images/gmail.jpeg" width="70" height="70" />
  <img class="image" src="images/instagram.jpeg" width="70" height="70" />
  <img class="image" src="images/whatsapp.jpeg" width="70" height="70" />
  <img class="image" src="images/telegram.jpeg" width="70" height="70" />
</div>

javascript jquery html css

Answer 1

Answer №1

If you need to implement drag and drop functionality in JavaScript, there are two distinct methods you can use. One involves appending an image, while the other is for replacing an image. Below is an example of how you can achieve this:

SCRIPT Content

<script>
        function changeHome() {
            document.getElementById('color').style.backgroundColor = "coral";
        }

        function changeGray() {
            document.getElementById('color').style.backgroundColor = "gray";
        }

        function changeRed() {
            document.getElementById('color').style.backgroundColor = "red";
        }

        function changeGreen() {
            document.getElementById('color').style.backgroundColor = "green";
        }

        function changeBlue() {
            document.getElementById('color').style.backgroundColor = "blue";
        }
        $(document).ready(function () {
            $('.image').click(function () {
                var srcimg = $(this).attr('src');
                var imgid = $(this).attr('id');
                console.log($(this));
                $('#color').append('<div ondrop="drop(event)"  ondragover="allowDrop(event)" style="float:left;display:block;height:50px;width:50px"><img id=' + imgid + "1" + ' src=' + srcimg + ' draggable="true" ondragstart="drag(event)" width="70" height="70">');
            });
        });

        function allowDrop(ev) {
            ev.preventDefault();
        }

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

        function drop(ev,ui) {
            console.log("evvv" + ev.srcElement);
            console.log($(this).parent('div'));
            ev.preventDefault();
            var src = document.getElementById(ev.dataTransfer.getData("src"));
            var srcParent = src.parentNode;
            if (srcParent.parentNode.id == "div1")
            {
                var data = ev.dataTransfer.getData("src");
                ev.target.appendChild(document.getElementById(data));
            }
            else
            {
                var tgt = ev.currentTarget.firstElementChild;

                ev.currentTarget.replaceChild(src, tgt);
                srcParent.appendChild(tgt);
            }

        }
        function drop1(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("src");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>

HTML Content

    <div class="container">
        <h1 align="center"><u> JavaScript Simple learning </u></h1>
        <h3 align="center"> Use of JavaScript to drag and drop icons in Background image </h3>
        <br /> <br />
        <div class="col-md-10">
            <div id="color" style="height:100px" ondragover="allowDrop(event)" ondrop="drop(event)" >
            </div>
        </div><br /><br />
        <div class="col-md-2">
            <button onclick="changeHome()"> Home Color  </button> <br /><br /><br />
            <button onclick="changeGray()"> Click for Gray </button> <br /><br />
            <button onclick="changeRed()"> Click for Red </button> <br /><br />
            <button onclick="changeGreen()"> Click for Green </button> <br /><br />
            <button onclick="changeBlue()"> Click for Blue </button> <br /><br />
        </div>

</div>
<div class="container" id="div1">
    <h2><u> List of Icons </u></h2>
    <div style="float:left;display:block">
        <img class="image" id="img1" src="Images/natural.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
    </div>
    <div style="float:left;display:block">
        <img class="image" id="img2" src="Images/nature2.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    <div style="float:left;display:block">
        <img class="image" id="img3" src="Images/sunset.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    <div style="float:left;display:block">
        <img class="image" id="img4" src="Images/dp1.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    <div style="float:left;display:block">
        <img class="image" id="img5" src="Images/dp2.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    <div style="float:left;display:block">
        <img class="image" id="img6" src="Images/guitar.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    <div style="float:left;display:block">
        <img class="image" id="img7" src="Images/images.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    </div>

Answer 2

If you need to implement drag and drop functionality in JavaScript, there are two distinct methods you can use. One involves appending an image, while the other is for replacing an image. Below is an example of how you can achieve this:

SCRIPT Content

<script>
        function changeHome() {
            document.getElementById('color').style.backgroundColor = "coral";
        }

        function changeGray() {
            document.getElementById('color').style.backgroundColor = "gray";
        }

        function changeRed() {
            document.getElementById('color').style.backgroundColor = "red";
        }

        function changeGreen() {
            document.getElementById('color').style.backgroundColor = "green";
        }

        function changeBlue() {
            document.getElementById('color').style.backgroundColor = "blue";
        }
        $(document).ready(function () {
            $('.image').click(function () {
                var srcimg = $(this).attr('src');
                var imgid = $(this).attr('id');
                console.log($(this));
                $('#color').append('<div ondrop="drop(event)"  ondragover="allowDrop(event)" style="float:left;display:block;height:50px;width:50px"><img id=' + imgid + "1" + ' src=' + srcimg + ' draggable="true" ondragstart="drag(event)" width="70" height="70">');
            });
        });

        function allowDrop(ev) {
            ev.preventDefault();
        }

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

        function drop(ev,ui) {
            console.log("evvv" + ev.srcElement);
            console.log($(this).parent('div'));
            ev.preventDefault();
            var src = document.getElementById(ev.dataTransfer.getData("src"));
            var srcParent = src.parentNode;
            if (srcParent.parentNode.id == "div1")
            {
                var data = ev.dataTransfer.getData("src");
                ev.target.appendChild(document.getElementById(data));
            }
            else
            {
                var tgt = ev.currentTarget.firstElementChild;

                ev.currentTarget.replaceChild(src, tgt);
                srcParent.appendChild(tgt);
            }

        }
        function drop1(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("src");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>

HTML Content

    <div class="container">
        <h1 align="center"><u> JavaScript Simple learning </u></h1>
        <h3 align="center"> Use of JavaScript to drag and drop icons in Background image </h3>
        <br /> <br />
        <div class="col-md-10">
            <div id="color" style="height:100px" ondragover="allowDrop(event)" ondrop="drop(event)" >
            </div>
        </div><br /><br />
        <div class="col-md-2">
            <button onclick="changeHome()"> Home Color  </button> <br /><br /><br />
            <button onclick="changeGray()"> Click for Gray </button> <br /><br />
            <button onclick="changeRed()"> Click for Red </button> <br /><br />
            <button onclick="changeGreen()"> Click for Green </button> <br /><br />
            <button onclick="changeBlue()"> Click for Blue </button> <br /><br />
        </div>

</div>
<div class="container" id="div1">
    <h2><u> List of Icons </u></h2>
    <div style="float:left;display:block">
        <img class="image" id="img1" src="Images/natural.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
    </div>
    <div style="float:left;display:block">
        <img class="image" id="img2" src="Images/nature2.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    <div style="float:left;display:block">
        <img class="image" id="img3" src="Images/sunset.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    <div style="float:left;display:block">
        <img class="image" id="img4" src="Images/dp1.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    <div style="float:left;display:block">
        <img class="image" id="img5" src="Images/dp2.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    <div style="float:left;display:block">
        <img class="image" id="img6" src="Images/guitar.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    <div style="float:left;display:block">
        <img class="image" id="img7" src="Images/images.jpg" width="70" height="70" draggable="true" ondragstart="drag(event)" />
        </div>
    </div>

Answer 3

Answer №2

To delete a single photo with a double click event, you can utilize the following function:

JavaScript Function

function DeleteImage(element)
        {

            element.parentElement.remove();  //removes the parent div of the image
            element.remove();  //removes the image itself
        }

HTML Code

  <img ondblclick="DeleteImage(this)" width="70" height="70">

Answer 4

To delete a single photo with a double click event, you can utilize the following function:

JavaScript Function

function DeleteImage(element)
        {

            element.parentElement.remove();  //removes the parent div of the image
            element.remove();  //removes the image itself
        }

HTML Code

  <img ondblclick="DeleteImage(this)" width="70" height="70">

Learn how to utilize Javascript to easily drag and drop an image within the same block

Answer №1

Answer №2

Similar questions

Arrange 4 divs (children) at each corner of the parent element

Accessing and fetching data from a PostgreSQL database using JavaScript through an API

"Web fonts without a content delivery network (CDN)

Interacting with a card in vuejs won't trigger any action

Unable to activate focus() on a specific text field

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

Convenient method for extracting the final element within a jQuery section

Scheduling tasks for jQuery/Javascript like a Cronjob

Refreshing a page occurs every 30 seconds or upon the user submitting a form

Creating a stunning 2D image from a 3D scene through the power of raytracing with webgl and three.js

Comparing functions and function issues when using onClick in JavaScript

Delayed callback on blur

Storing data from one file into a different directory in PHP

Utilize Bootstrap and Flat UI to enhance the design of a div, or duplicate the styles to apply to the navbar

Conceal dynamically generated div elements created with ngIf

Shorten a data point in JSON code

Incorporating EJS Template Body Parameters into AWS Lambda's Handler.js Using Serverless.yml

What is the best way to retrieve both the start and end date values from a React date range picker component

Is there a way to extract both a and b from the array?

Silly problem arising from the animate feature in jQuery