So far I have managed to implement a simple drag and drop feature. It allows the user to drag the image from one div into another div. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title> The New Dashboard </title>
<style>
#div1 {width:1000px;height:500px;padding:10px;border:1px solid #aaaaaa;}
#top {width:1000px;height:100px;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>
<div id = "top" ondrop="drop(event)" ondragover="allowDrop(event">
<img id = "drag1" src="slwheel.png" draggable="true" ondragstart="drag(event)">
</div>
<div id = "div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
</html>
So now I want to drag the slwheel image from its new location in the #div1 div back into the #top div, but it does not let me do so. What am I doing wrong? Any help can be appreciated. Thanks!
In top div you miss ) in allowDrop(event)
There was a missing ) in the "top" div that would not make my code work. Complete rookie mistake. My sincerest apologies.
Related
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 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>
I would like some help to improve the following. How can I get a an incorrect dropped answer to be shown in red or green if it is correct. This is gap filling Drag & Drop exercise for my language students.
Below is the simple code I am using:
<!DOCTYPE HTML>
<html>
<head>
<style>
.draggable {
width: 120px;
padding: 1px;
border: 1px solid gray;
margin: 0px;
text-align:center;
}
#div1,#div2
{display:inline-block;min-width:150px;min-height:10px;
border-style:solid;border-width:0px;border-bottom-width:2px;}
</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.parentNode.replaceChild(document.getElementById(data), ev.target);
document.getElementById(data).className = "";
}
</script>
</head>
<body>
<span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)">
HEART TO HEART</span>
<span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">
EYE TO EYE</span>
<br />
<ol>
<li>Our relationship was going badly wrong, but after we sat down and had a
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> talk we
decided to try again. We're a lot happier now.
</l7>
<li>I wish my wife and my sister could agree about some things. The problem is that
they just can't see <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div> and argue about everything.
</li>
</ol>
</body>
</html>
If you set the loading option in JSFiddle to "No wrap - in <head>" then the drag and drop will work. Please use the console to diagnose your issues and include any errors in your post.
It appears that you were following this tutorial on http://www.w3schools.com/html/html5_draganddrop.asp which is not the place to be learning web development as they are not endorsed/affiliated by W3.
The following DEMO should function properly. I tested this out on Chrome.
I made a simple change to the drag() function:
function drag(ev) {
ev.target.innerHTML += ' '; // Add space so that there is no keming...
ev.dataTransfer.setData("Text", ev.target.id);
}
This is inside my CSS:
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
This is in my HTML:
16:10
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.
Any help is much appreciated.
Pure CSS Answer
Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:
a:target:after{
content: " Test";
background-color: #ccffcc;
}
What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
</body>
</html>
Answer using JavaScript
You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>
"showText" must receive an id parameter to be used with the call to "document.getElementById"
Try this, just 1 link that will display the text below after click:
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
I'm just using style display to hide/show the element. Hope it helps.
just change your css like this:
div.show {
display:block;
color: #66CCFF;
}
Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
So I have only been learning html/css/javascript for a few months now and I can't seem to get drag and drop to work with html5/javascript. I'm not actually making a website or anything I'm just trying to learn and I have got html elements to become draggable with jQuery I just can't seem to get it to work with html5/javascript.
My html code is as followed:
<DOCTYPE html>
<html>
<body>
<img id="steam" src="http://www.omgubuntu.co.uk/wp-content/uploads/2012/07/Steam_Logo.png" draggable="true" ondragstart="drag(event)" />
<div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div>
</body>
</html>
My css code is as followed:
#div1 {
width:350px;
height:350px;
border:2px solid #AA560B;
}
My javascript is as followed:
window.onload = function(){
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));
}
}
I'm not entirely sure what I'm doing wrong. Any help would be greatly appreciated.
You have a typo in your HTML, your function in HTML is not camelCase like in Javascript.
This line:
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
Change allowdrop to allowDrop.
fiddle: http://jsfiddle.net/U55rc/
You now have a problem with positioning because the box will automatically snap to top without the Steam logo there, but that's another problem entirely.
I'm using Angular and I had to include the drag and drop functions in my tag inside index.html. This helped me.
<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>