1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Looking for example multiple drag en drop

Discussion in 'JavaScript' started by EricBruggema, Nov 17, 2023.

0
  1. #1
    Hi there,

    For a project wich im working on i'm looking for an example in javascript to do the following.

    Example: you have a couple of divs that you can select, when selected i want to drag them all to a drop zone, is this possible and yes how? anyone have any example?
     
    EricBruggema, Nov 17, 2023 IP
  2. EricBruggema

    EricBruggema Well-Known Member

    Messages:
    1,740
    Likes Received:
    28
    Best Answers:
    13
    Trophy Points:
    175
    #2
    EricBruggema, Nov 18, 2023 IP
  3. sbsl

    sbsl Well-Known Member

    Messages:
    120
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    163
    #3
    Certainly! Achieving drag-and-drop functionality in JavaScript can be done using various libraries or by writing custom code. I'll provide you with a basic example using vanilla JavaScript for simplicity. Please note that for more complex projects, you might want to consider using a library like jQuery UI or a dedicated drag-and-drop library.

    Here's a simple example of how you can implement basic drag-and-drop functionality in JavaScript:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Example</title>
    <style>
    .draggable {
    width: 50px;
    height: 50px;
    background-color: lightblue;
    margin: 10px;
    cursor: pointer;
    }

    #dropZone {
    width: 200px;
    height: 200px;
    background-color: lightgreen;
    margin-top: 20px;
    padding: 10px;
    }
    </style>
    </head>
    <body>

    <div class="draggable" draggable="true" ondragstart="drag(event)">1</div>
    <div class="draggable" draggable="true" ondragstart="drag(event)">2</div>
    <div class="draggable" draggable="true" ondragstart="drag(event)">3</div>

    <div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">Drop Zone</div>

    <script>
    function drag(event) {
    event.dataTransfer.setData("text", event.target.innerText);
    }

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

    function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
    var droppedElement = document.createElement("div");
    droppedElement.className = "draggable";
    droppedElement.innerText = data;

    // Append the dragged element to the drop zone
    event.target.appendChild(droppedElement);
    }
    </script>

    </body>
    </html>

    In this example:

    • The draggable class is assigned to the elements you want to make draggable.
    • The ondragstart event is used to set the data to be transferred during the drag.
    • The drop zone has ondrop and ondragover events to handle the drop action and allow dropping.
    This is a basic example, and you may need to adapt it to your specific project requirements. If your project involves more complexity, you might want to consider using a library that provides additional features and better cross-browser compatibility.
     
    sbsl, Nov 20, 2023 IP
  4. EricBruggema

    EricBruggema Well-Known Member

    Messages:
    1,740
    Likes Received:
    28
    Best Answers:
    13
    Trophy Points:
    175
    #4
    Its nice that you use ChatGPT to give you the answers, but it totaly miss the things i want it to do..

    But thanks anyway! :)
     
    EricBruggema, Nov 20, 2023 IP
  5. johnmarks124

    johnmarks124 Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    • Three <div> elements with the class "draggable" are created. They are set as draggable and have an ondragstart attribute to initiate the drag.
    • A <div> with the class "dropzone" is created to act as the drop zone. It has ondrop and ondragover attributes to handle the drop event.
    • The JavaScript functions drag, allowDrop, and drop are defined to handle the drag and drop functionality.
    You can customize and expand upon this example based on the specific requirements of your project.
     
    johnmarks124, Nov 20, 2023 IP
  6. johnmarks124

    johnmarks124 Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    chat
    Long Live Chat GBT
     
    johnmarks124, Nov 20, 2023 IP