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>
Related
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 want to be able to drag an element from one div into another, keeping the original where it is and making a clone in the second div. Once the cloned element is in the second div it should still be draggable.
I have implemented this twice, once with plain javascript and once using directives in Angular JS.
In the plain javascript implementation everything works as intended; a cloned object can be dragged again.
However, in the Angular JS implementation, cloned objects cannot be dragged. I'm not sure why it isnt keeping the draggable property.
Here is my code:
HTML
<!DOCTYPE html>
<head>
<title>Drag and Drop Test</title>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- Jitsi External -->
<script src="https://meet.jit.si/external_api.js"></script>
<!-- Local JS -->
<script type="text/javascript" src="../js/dragdrop.js"></script>
<!-- Local CSS -->
<link rel="stylesheet" href="../css/dragdrop.css">
</head>
<body ng-app="myApp">
<div>
<div class="dragdrop-panel" id="drag-from-div">
<h1>Icons</h1>
<div id="dragme" class="draggablewithjs" draggable="true" ondragstart="drag(event)">
</div>
<div id="dragme2" class="draggablewithangular" drag-item>
</div>
</div>
<div class="dragdrop-panel" id="drop-to-div" drop-area>
<h1>Selected</h1>
</div>
<div class="dragdrop-panel" id="trash-div" drop-area>
<h1>Trash</h1>
</div>
</div>
</body>
Javascript
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
app.directive("dropArea", function() {
return {
link: function(scope,elem, attrs) {
elem.bind('drop', function(ev){
ev.preventDefault();
var data;
if (ev.dataTransfer) {
data = ev.dataTransfer.getData('text');
}
else if (ev.originalEvent.dataTransfer){
data = ev.originalEvent.dataTransfer.getData('text');
}
//var dropObj = document.getElementById(data).cloneNode();
//dropObj.id = dropObj.id + "1";
//dropObj.setAttribute('style', 'width:50px;height:50px;background:blue;');
ev.target.appendChild(document.getElementById(data).cloneNode());
});
elem.bind('dragover', function(ev){
ev.preventDefault();
if (ev.target.getAttribute("draggable") == "true"){
ev.originalEvent.dataTransfer.dropEffect = "none";
}
else{
ev.originalEvent.dataTransfer.dropEffect = "all";
}
});
elem.css({
color: "blue"
});
}
}
});
app.directive('dragItem', function() {
return {
restrict: 'A',
replace: 'false',
link: function(scope,elem,attrs){
elem.bind('dragstart', function(ev){
if (ev.dataTransfer) {
ev.dataTransfer.setData("text", ev.target.id);
}
else if (ev.originalEvent.dataTransfer){
ev.originalEvent.dataTransfer.setData("text", ev.target.id);
}
});
elem.bind('dragover', function(ev){
return true;
});
attrs.$set('draggable','true');
}
//draggable="true" ondragstart="drag(event)"
}
});
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).cloneNode(true));
}
and CSS
.dragdrop-panel {
width:25vw;
margin-right: 5vw;
height: 100vh;
border: 3px solid red;
float: left;
}
.draggablewithjs {
width:50px;
height:50px;
background:blue;
}
.draggablewithangular {
width:50px;
height:50px;
background:red;
}
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 trying to drag image in javascript
i know it is easily done using jQuery, but i want to make it using javascript
here is the code but it is not working
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dragImage</title>
<meta name="author" content="engy" />
<!-- Date: 2015-02-17 -->
</head>
<body>
<!--<img src="bbe.jpg" style="width:104px;height:128px">-->
<!-- <img id = "img" src="bbe.jpg" style="position:absolute; TOP:posY; LEFT:posX; WIDTH:50px; HEIGHT:50px"> -->
<!--top=y=155px;left=x=70px;-->
<script>
var flagdown = 0;
</script>
<script>
function up() {
flagdown = 0;
}
function down() {
//document.write("jk");
flagdown = 1;
}
function move(e) {
if (flagdown == 1) {
var posX = e.clientX;
var posY = e.clientY;
document.getElementById("img").style.marginLeft = posX;
document.getElementById("img").style.marginTop = posY;
}
}
document.onmousemove = move;
</script>
</body>
</html>
can anyone help me?
i have tried it in many browsers but it still doesn't work
var flagdown = 0;
function up() {
flagdown = 0;
}
function down() {
//document.write("jk");
flagdown = 1;
}
function move(e) {
if (flagdown == 1) {
var posX = e.clientX;
var posY = e.clientY;
document.getElementById("img").style.marginLeft = posX;
document.getElementById("img").style.marginTop = posY;
}
}
document.onmousemove = move;
<img onmouseup="up()" onmousedown="down()" id="img" src="bbe.jpg" draggable="true" width="50" height="50">
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {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.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="100">
</body>
</html>
I have a div which can be dragged. If it's dragged, I would like to add its text to mouse and after leaving the mouse I want to show some menu like copy.
I have tried this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#div1
{
width:350px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script>
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
//console.log(ev.dataTransfer);
//var data=ev.dataTransfer.getData("Text");
//ev.target.appendChild(document.getElementById(data));
alert(ev.target.id);
}
function allowDrop(ev){
ev.preventDefault();
}
</script>
</head>
<body>
<a draggable="true" ondragstart="drag(event)" id="drag-id" >dragme</a>
<div id="div1" style="border: solid 1px; width:40px; height:40px;" ondrop="return drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
SOLUTION using fake drag 'n drop.
The problem here is that it only works inside the body element.
var fakeDrag = {
setup: function(){
fakeDrag.el = document.createElement('span');
fakeDrag.el.style['pointer-events'] = 'none';
fakeDrag.el.style['position'] = 'absolute';
fakeDrag.el.style['display'] = 'none';
fakeDrag.el.textContent = 'dragging';
document.body.appendChild(fakeDrag.el);
},
dragging: false,
drag: function(event){
if(event.target.classList.contains('drag')){
fakeDrag.dragging = true;
fakeDrag.source = event.target;
fakeDrag.el.style['display'] = 'inline';
}
},
dragmove: function(event){
fakeDrag.el.style['top'] = ++event.clientY+'px';
fakeDrag.el.style['left'] = ++event.clientX+'px';
},
drop: function(event){
if(event.target.classList.contains('drop') && fakeDrag.dragging){
event.target.textContent = fakeDrag.source.textContent;
}
fakeDrag.dragging = false;
fakeDrag.el.style['display'] = 'none';
}
};
fakeDrag.setup();
For menu you use it:
<div id="context_menu" style="width:150px;border:1px solid black;background-color:#EEEEEE;visibility:hidden;position:absolute;line-height:30px; padding-left: 10px">
<div id="copy" onclick="CopyFunction(this)" divIDMenu="">copy</div>
<div id="paste"onclick="PasteFunction(this)" divIDCopy="" divIDMenu="">paste</div>
<div id="cut" onclick="cutFunction(this)"divIDMenu="">cut</div>
<div id="delete" onclick="deleteFunction(this)" divIDMenu="">delete</div>
<div id="reload" onclick="reloadFunction(this)" divIDMenu="">reload</div>
</div>