Those skilled in the art of Drag and drop

Question

Those skilled in the art of Drag and drop

Currently, I'm delving into the world of drag and drop functionality. While it's not overly difficult to grasp, there is one aspect that is really bothering me. As I navigate through this process, I stumbled upon this informative resource: http://www.w3schools.com/html/html5_draganddrop.asp

I'm puzzled as to why elements, such as images, stack on top of each other when dragged. Is there a method to prevent this stacking behavior? Ideally, I would like nothing to happen when a draggable element is dragged over another draggable element. Any assistance or guidance on how to achieve this would be greatly appreciated!

javascript html css drag-and-drop draggable

Answer 1

Answer №1

It seems like there might be some confusion, but I recommend learning from various sources of information to ensure you grasp all aspects of the lesson.

The original example included attributes in the div to enable content to be dragged and dropped onto it. Here is a snippet of the code with explanations for each attribute used.

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

The key attributes are:

ondrop="drop(event), which triggers an event when the element is dropped
ondragover="allowDrop(event)", which allows the drop action to occur

The main takeaway here is that a div's ability to receive a 'drop' operation depends on having the necessary attributes set. If these conditions are not met (i.e.,

ondrop="drop(event)" ondragover="allowDrop(event)"

), the drop action will not be permitted.

I have retained and enhanced this example to provide a more comprehensive understanding since you are already familiar with it. Some points to consider include:

Notice how red highlighting persists if the draggable item is dropped on an invalid target. This demonstrates the completion of the 'drag' function, while the 'drop' function remains pending. The script modifies CSS properties to achieve these visual effects.
I have included multiple Codepen examples to showcase using different tabs/windows, contrasting with the W3Schools example to illustrate functionality without 'script' or 'style' tags.
The script is kept simple, setting CSS properties for each div individually and reusing variables intentionally for experimental purposes only.
In-code comments are provided to explain complex sections for easier comprehension.

http://codepen.io/anon/pen/WwdgbY
http://codepen.io/anon/pen/zqpJjo

Hopefully, this clarifies things for you!

Answer 2

It seems like there might be some confusion, but I recommend learning from various sources of information to ensure you grasp all aspects of the lesson.

The original example included attributes in the div to enable content to be dragged and dropped onto it. Here is a snippet of the code with explanations for each attribute used.

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

The key attributes are:

ondrop="drop(event), which triggers an event when the element is dropped
ondragover="allowDrop(event)", which allows the drop action to occur

The main takeaway here is that a div's ability to receive a 'drop' operation depends on having the necessary attributes set. If these conditions are not met (i.e.,

ondrop="drop(event)" ondragover="allowDrop(event)"

), the drop action will not be permitted.

I have retained and enhanced this example to provide a more comprehensive understanding since you are already familiar with it. Some points to consider include:

Notice how red highlighting persists if the draggable item is dropped on an invalid target. This demonstrates the completion of the 'drag' function, while the 'drop' function remains pending. The script modifies CSS properties to achieve these visual effects.
I have included multiple Codepen examples to showcase using different tabs/windows, contrasting with the W3Schools example to illustrate functionality without 'script' or 'style' tags.
The script is kept simple, setting CSS properties for each div individually and reusing variables intentionally for experimental purposes only.
In-code comments are provided to explain complex sections for easier comprehension.

http://codepen.io/anon/pen/WwdgbY
http://codepen.io/anon/pen/zqpJjo

Hopefully, this clarifies things for you!

Answer 3

Answer №2

Providing an overview of my creative vision:

I am looking to develop a dynamic list containing various elements that can be easily dragged and placed within a designated area. These elements should have the flexibility to move back and forth based on user preferences, while ensuring they do not overlap each other to avoid any content disappearing.

The next step involves creating a mechanism that identifies the selected elements within the drag area. Subsequently, I plan to utilize PHP to generate an email listing the chosen element names by the user - although this aspect is a completely separate endeavor!

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

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
/*
if($("#div1").has(".drag-img").length)) {

}
*/

#element-box{
border-radius: 10px;
background-color: #333333;
height: 50px;
width:50px;
display: inline-block;
margin: 10px 20px;
}

#div1{
      width:400px;
      height:70px;
      padding:20px;
      border:1px solid #aaaaaa;
    }

    #drag1{
    background: red;
    }

    #drag2{
    background: blue;
    }

    #drag3{
    background: green;
    }

    #drag4{
    background: orange;
    }

    #drag5{
    background: hotpink;
    }

<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag1" src="img/one.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag2" src="img/two.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag3" src="img/three.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag4" src="img/four.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag5" src="img/five.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Answer 4

Providing an overview of my creative vision:

I am looking to develop a dynamic list containing various elements that can be easily dragged and placed within a designated area. These elements should have the flexibility to move back and forth based on user preferences, while ensuring they do not overlap each other to avoid any content disappearing.

The next step involves creating a mechanism that identifies the selected elements within the drag area. Subsequently, I plan to utilize PHP to generate an email listing the chosen element names by the user - although this aspect is a completely separate endeavor!

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

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
/*
if($("#div1").has(".drag-img").length)) {

}
*/

#element-box{
border-radius: 10px;
background-color: #333333;
height: 50px;
width:50px;
display: inline-block;
margin: 10px 20px;
}

#div1{
      width:400px;
      height:70px;
      padding:20px;
      border:1px solid #aaaaaa;
    }

    #drag1{
    background: red;
    }

    #drag2{
    background: blue;
    }

    #drag3{
    background: green;
    }

    #drag4{
    background: orange;
    }

    #drag5{
    background: hotpink;
    }

<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag1" src="img/one.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag2" src="img/two.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag3" src="img/three.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag4" src="img/four.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag5" src="img/five.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Those skilled in the art of Drag and drop

Answer №1

Answer №2

Similar questions

How can I position a logo slightly off center to the left, rather than all the way to the left?

Uncovering the origin of surprising reactivity issues in Vue 3 component workings

Transforming traditional HTML table layout to modern div structure

Attempting to locate the element's position using Selenium in Python

Storing values in localStorage with a specific format can be accomplished by following these steps

Tips for altering the appearance of a dropped item using JQueryUI sortable

Definition list with alternating left and right alignments

Creating a dynamic table in VuetifyJS by populating it with data in real-time

HTML - implementing a login system without the use of PHP

Establishing communication between a master process and worker processes in Node.js: A guide to verifying bidirectional communication

Convert JSON objects within an array into HTML format

Is it possible to have both a Navbar and Sidebar concurrently using Bootstrap?

The functionality to apply a color class to a navbar item when clicked is malfunctioning

Utilizing BeautifulSoup for Web Scraping (handling missing values during the scrape)

What is the best way to iterate over a multidimensional array in Angular/Ionic?

Tips on modifying the width of grid lines for individual lines

The issue of AngularJS directives not populating correctly with their associated templates

Confirming the manipulation of Node.js callbacks

Transmit data from list items in the HTML to a form

Guide to Modifying the Parameter Value in JMeter's "Http Request" for a checkbox with "title" text managing the state