My div structure is some like this,
<div class="fromDiv">
.......From here I want to drag..........
</div>
<div class="parantDiv">
<div class="childFirst">
..Here Want to drop......
</div>
<div class="childSecond">
..OrHere Want to drop......
</div>
</div>
I want drag something from fromDiv Div...
And want to drop that in childFirst Div OR childSecond Div....
Please help me out...........
You can use HTML5 Drag and Drop, please check browser support
Simple example
<!DOCTYPE HTML>
<html>
<head>
<style>
.fromDiv,.childFirst, .childSecond {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.innerHTML);
}
function drop(ev) {
ev.preventDefault();
ev.target.innerHTML = ev.dataTransfer.getData("text");
}
</script>
</head>
<body>
<div class="fromDiv" draggable="true"
ondragstart="drag(event)">
.......From here I want to drag..........
</div>
<div class="parantDiv">
<div class="childFirst" ondrop="drop(event)" ondragover="allowDrop(event)">
..Here Want to drop......
</div>
<div class="childSecond" ondrop="drop(event)" ondragover="allowDrop(event)">
..OrHere Want to drop......
</div>
</div>
</body>
</html>
Related
I want the smaller div box to show up in the larger div.
However, when I drag and drop it, this is what it looks like:
Why isn't the small box's border properly showing in the larger box? I have modified the drop function so that it copies the 2nd div instead of dropping it.
<html>
<head>
<script>
function remove(id){
//var el = document.getElementById("r1").outerHTML = "";
var element = document.getElementById(id);
element.parentNode.parentNode.removeChild(element.parentNode);
console.log('Removed')
}
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");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = 'something';
ev.target.appendChild(nodeCopy);
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id = "drag1" draggable="true" ondragstart="drag(event)" height="50px" width="50px">
<span id="yo" class="fa fa-close cross" onclick="remove(this.id);"></span>
</div>
</body>
</html>
Hey #Presence as I check the thing which you are saying is working with the HTML and JS which you provided which concludes that you don't have any problem in javascript. Maybe you are facing this issue because of CSS.
You can use the CSS mentioned in the answer or else you can upload your CSS in question from which we can find out which property is giving you the issue.
function remove(id) {
//var el = document.getElementById("r1").outerHTML = "";
var element = document.getElementById(id);
element.parentNode.parentNode.removeChild(element.parentNode);
console.log("Removed");
}
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");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "something";
ev.target.appendChild(nodeCopy);
}
.dropDiv {
height: 15vh;
border: 2px solid grey;
}
.dragDiv {
height: 9vh;
border: 2px solid grey;
width: 53vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div class="dropDiv" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div class="dragDiv" id="drag1" draggable="true" ondragstart="drag(event)" height="50px" width="50px">
<span id="yo" class="fa fa-close cross" onclick="remove(this.id);"></span>
</div>
<script src="./index.js"></script>
</body>
</html>
height="50px" width="50px" doesn't work with the div. It is specific to few tags.
You can set the styles in the following ways for div.
Add CSS styling with class. (Preferred solution)
Add In-line styling for the div, like this. style="width: 100px"
Added the code snippet for your reference.
function remove(id){
//var el = document.getElementById("r1").outerHTML = "";
var element = document.getElementById(id);
element.parentNode.parentNode.removeChild(element.parentNode);
console.log('Removed')
}
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");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = 'something';
ev.target.appendChild(nodeCopy);
}
.box{
border: 1px solid black;
}
.big{
width: 120px;
height: 50px;
}
.small{
width: 80px;
height: 30px;
}
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" class="big box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag1" class="small box" draggable="true" ondragstart="drag(event)">
<span id="yo" class="" onclick="remove(this.id);">x</span>
</div>
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 200px;
padding: 10px;
border: 1px solid #aaaaaa;
}
p{
cursor:pointer;
}
</style>
<script>
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));
}
function ChangeColor(id){
document.getElementById(id).style.color = "red";
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" onclick="ChangeColor('drag1')" draggable="true" ondragstart="drag(event)" width="336" height="69"><b>one</b></p>
<p id="drag2" onclick="ChangeColor('drag2')" draggable="true" ondragstart="drag(event)" width="336" height="69"><b>two</b></p>
<p id="drag3" onclick="ChangeColor('drag3')" draggable="true" ondragstart="drag(event)" width="336" height="69"><b>three</b></p>
<p id="drag4" onclick="ChangeColor('drag4')" draggable="true" ondragstart="drag(event)" width="336" height="69"><b>four</b></p>
</body>
</html>
How to drag and drop multiple elements by selecting at once.
Just like in my code, when i will click on each tags it will change color to red. whoever is selected they are red color.
There are total 4 tags
suppose i choosed 3 ptags by clicking and the marked red after clicking.
I wants to drag and drop all marked three elements to div (drop zone).
same will apply for 2 tags selected for.
Is there any way to achieve that ?
Please have a look
I am using html to drag an image with id ="drag1" to drag and drop it to division with id="div1" and it doesn't work. I already have a division with 4 images and its source code is changing and it's working. Can you please help me fix this problem?
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));
}
setTimeout(fun,15000);
function fun(){ document.getElementById("image1").src="bed1.jpg"
}
setTimeout(fun1,30000);
function fun1(){ document.getElementById("image2").src="bed1.jpg";
}
setTimeout(fun2,6000);
function fun2(){ document.getElementById("image3").src="bed1.jpg";
}
setTimeout(fun3,60000);
function fun3(){ document.getElementById("image4").src="bed1.jpg";
}
setTimeout(fun4,45000);
function fun4(){ document.getElementById("image5").src="bed1.jpg";
}
#div1 {
height: 300px;
padding: 10px;
border: 1px solid #aaaaaa; background-color:white;
}
body {
background: lavender;
}
img {
height: 250px;
width: 230px;
}
<!DOCTYPE html>
<html>
<head>
<title>Drag Image</title>
</head>
<body>
<h1 style="margin-left:100px; margin-top:70px; color:firebrick;font-family:arial; font-size:50px">Medical Care</h1><br />
<img src="gethelp.png" height=100px width=130px style="margin-left:130px;" />
<div style="background-color:white;margin-top:140px;padding:50px;">
<img id="image1" src="bed.jpg">
<img id="image2" src="bed.jpg">
<img id="image3" src="bed.jpg">
<img id="image4" src="bed.jpg">
<img id="image5" src="bed.jpg">
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="bed.jpg" draggable="true" ondragstart="drag(event)">
</body>
</html>
Just help me figure out why drag and drop is not working with this code. It is working separately but not in this code.
I am to drag and drop elements to the target div and also without removing it from the source div
Using below code drag and drop works fine but I was trying to retain the element in the source div without deleting it
HTML:
<html>
<head>
</head>
<body>
<p>Drag the elements image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">Input</div>
<div id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Radio</div>
<div id="drag3" draggable="true" ondragstart="drag(event)" width="336" height="69">Checkbox</div>
<div id="drag4" draggable="true" ondragstart="drag(event)" width="336" height="69">Dropdown</div>
</div>
<br>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
</body>
</html>
JS:
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));
}
CSS:
#div1, #div2 {
width: 350px;
height: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#drag1,#drag2,#drag3,#drag4{
border:1px solid black;
margin:5px;
}
Quite old question, just in case it helps someone:
You can actually close the html in the dataTransfer.
Eg:
function dropClone(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
Use the cloneNode to clone the source.
I want to move an html element inside a web page, but all the examples I can find are related to move an element to another element:
event.target.appendChild(document.getElementById(data));
I can't find a way to move an element on an empty web page (I don't want to use divs since I want to create a workflow generator)
This is the code from w3schools, I removed the information not needed, this code has 2 divs and a paragraph element, and you can drag the <p> between both divs, but not outside them, which is what I want to do, any suggestion will be well appreciated:
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
//this is what I don't want to do, I want to move the paragraph freely
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
It sounds like what you want is demonstrated by the jquery draggable support - demo here of moving a rectangle around in a box: https://jqueryui.com/draggable/
Then make your body droppable:
<body class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
or just nest everything in a div:
<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
... all the rest comes here
</div>
</body>