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.
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 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.
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>
I am building a horizontal and vertical scroller for a website I am currently developing. The vertical one is working great, with no problems, and I have also managed to incorporate jQuery to control it's animation.
The problem lies in the horizontal scroller. To control it I need one important data: the total length of the div#news1 content (to use in the comp variable in function mexer). However the browser only returns me the clientHeight, which is the same as it's container (div#cont1). I need this to be generated automatically and properly by the browser because my website will have dynamic data inserted into it (PHP).
Why does this happen? What I am doing wrong? How can I fix it?
Here is the code for the test file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="JS/jquery-1.7.2.min.js"></script>
<style type="text/css">
.container {
width:250px;
height:250px;
overflow:hidden;
float:left;
border:3px solid #666;
}
.container1 {
width:400px;
height:125px;
overflow:hidden;
border:3px solid #666;
}
.botao {
border:3px solid #666;
background-color:#CCC;
padding:3px 3px 3px 3px;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="container" id="cont">
<div id="news" style="position:relative">
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
</div>
</div>
<p><span id="botao1" onClick="mexe(1)" class="botao">Para cima</span></p>
<p><span id="botao2" onClick="mexe(2)" class="botao">Para baixo</span></p>
<div class="container1" id="cont1" style="float:left">
<div id="news1" style="position:relative">
<div style="float:left"><img src="fotosdojoao/1.png" height="125" width="250"></div>
<div style="float:left"><img src="fotosdojoao/2.png" height="125" width="250"></div>
<div style="float:left"><img src="fotosdojoao/3.png" height="125" width="250"></div>
<div style="float:left"><img src="fotosdojoao/4.png" height="125" width="250"></div>
</div>
</div>
<p><span id="botao3" onClick="mexer(1)" class="botao">Esquerda</span></p>
<p><span id="botao4" onClick="mexer(2)" class="botao">Direita</span></p>
<script type="text/javascript">
var topo;
var baixo;
var avanco;
var altura;
function mexe(direcao)
{
topo=Number(document.getElementById("news").style.top.substr(0,document.getElementById("news").style.top.length-2));
baixo=Number(document.getElementById("news").style.top.substr(0,document.getElementById("news").style.bottom.length-2));
avanco=Number(document.getElementById("cont").clientHeight);
altura=Number(document.getElementById("news").clientHeight)-avanco+30;
if (direcao==1 && topo<0)
{
if((topo+avanco)>=0)
{
topo=0;
}
else
{
topo=topo+avanco;
}
//document.getElementById("news").style.top=topo+"px";
}
if(direcao==2)
{
if((topo-avanco)*(-1)>=altura)
{
topo=altura*-1;
}
else
{
topo=topo-avanco;
}
//document.getElementById("news").style.top=topo+"px";
}
}
$(document).ready(function()
{
$("#botao1").click(function(){
$("#news").animate({top:topo+"px"},"normal","swing");
});
$("#botao2").click(function(){
$("#news").animate({top:topo+"px"},"normal","swing");
});
});
function mexer(direcao)
{
esq=Number(document.getElementById("news1").style.left.substr(0,document.getElementById("news1").style.left.length-2));
passagem=Number(document.getElementById("cont1").clientWidth);
comp=Number(document.getElementById("news1").style.width.substr(0,document.getElementById("news1").style.width.length-2));
maximo=comp-passagem+20;
if (direcao==1 && esq<0)
{
if((esq+passagem)>=0)
{
esq=0;
}
else
{
esq=esq+passagem;
}
document.getElementById("news1").style.left=esq+"px";
}
if(direcao==2)
{
if((esq-passagem)*(-1)>=maximo)
{
esq=maximo*-1;
}
else
{
esq=esq-passagem;
}
document.getElementById("news1").style.left=esq+"px";
}
}
</script>
</body>
</html>
Not sure it's what you wanted, but to set/get the width you can do it like this:
//get width of an item
var itemWidth = $('#news1 > div:first').width();
//count number of items
var itemsCount = $('#news1 > div').length;
//width * count = width
var containerWidth = itemWidth * itemsCount;
alert(containerWidth);
You can set it directly doing
$('#news1').width(containerWidth);
Or use it when you make the scrolling.
Since it's not in english i have a hard time understanding how it works :/