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>
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 have a simple draggable function here that I am using for a math game I am trying to get my numbers to appear in one row but currently with this code below they appear stacked on top of each other like this
1
2
3
4
How do i get them to be like this 1 2 3 4 5
<!DOCTYPE html>
<html>
<head>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
</head>
<body>
<div id="draggable1" class="ui-widget-content">
<p><img src="mypicturesurl.com is here;"></p>
</div>
<div id="draggable1" class="ui-widget-content">
<p><img src="mypictureurl.com;"></p>
</div>
<div id="draggable1" class="ui-widget-content">
<p><img src="Samepictureurl.com;"></p>
</div>
</body>
i am just testing all with the one function to see if i can get them into the row or not. Thank you for help
Use float: left; to make it horizontal.
.draggable1 img {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
}
Fiddle
First of all, you have multiple elements with the same ID draggable1 in your HTML. Javascript will fail to recognize all of them. If you need to select multiple elements consider using a class selector instead, which will allow you to select all of them at once. Then your javascript will change to:
$(function() {
$( ".draggable1" ).draggable();
});
and you will be able to drag all of your elements.
Next, your CSS is set to affect elements with ID: draggable (there are none). Instead, you should use the same class selector before (since there are multiple), and this will change to:
.draggable1 { width: 150px; height: 150px; padding: 0.5em; }
Finally, if you need them to start side by side, instead of stacked on top of each other, consider floating them left: float: left.
Also you should try to separate your HTML, CSS, and Javascript into separate files to keep the logic distinct as your application grows. This is considered good style.
You're going to want to make sure you add float: left to your CSS to make sure the elements start on the left side and remain horizontal. You must also make sure that you inherit this class with each element. Your code used the draggable ID, which none of your elements inherited. Additionally, element IDs should be different, so I made each element have a unique ID in the amended code below as well as changing the CSS type to a class:
<!DOCTYPE html>
<html>
<head>
<style>
.draggable { width: 150px; height: 150px; padding: 0.5em; float: left;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
</head>
<body>
<div id="draggable1" class="draggable ui-widget-content">
<p><img src="mypicturesurl.com is here;"></p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p><img src="mypictureurl.com;"></p>
</div>
<div id="draggable3" class="draggable ui-widget-content">
<p><img src="Samepictureurl.com;"></p>
</div>
</body>
</html>
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.
I though I had this working and that I had done it right, but when I looked in IE and Chrome web browsers it was not perfect. This does however function correctly in Firefox. I am working at modifying a function that uses javascript to display a different .png file depending on which thumbnail is clicked. I modified it so that that instead of clicking thumbnails one would click links. The issue in the code is at the bottom in the H2 heading portion of the code. In IE and Chrome the text "choose" and the 2 links (Link_1 and Link_2) don't show up exactly next to each other, but instead the links show up a little higher. Also in Chrome and IE the links don't have that line underneath the link that we should see. I put this inside the heading H2 because it gave me control over the text style of the text "choose". Could someone please tell me the right way to put the text "choose" next to these links.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>clickLinks</title>
<style type="text/css">
H1 {line-height:0px;}
H1 {padding: 0cm 0cm 0cm .2cm; }
P {padding: 0cm 0cm 0cm 0cm;}
a {padding: 0cm 0cm 0cm .3cm;}
body { width: 920px; margin: auto; }
#imageWrap {
width: 930px;
height: 470px;
background: url('ajax-loader.gif') center center no-repeat;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
</head>
<body>
<H2 style="font-family:Angency FB;color:#A8A8A8; font-size:14px">choose:
<a href="picture_1.png" class="thumbnail"><img
alt="Link_1"/></a>
<a href="picture_2.png" class="thumbnail"><img
alt="Link_2"/></a>
<div id="imageWrap">
<img src="picture_1.png" WIDTH="930" HEIGHT="470" alt="Main Image" id="mainImage"/></p>
</div> </H2>
</body>
</html>
Take a look at this FIDDLE. You had the h2 tag surrounding everything...which you shouldn't need to do.
<H2 style="font-family:Angency FB;color:#A8A8A8; font-size:14px">choose:</H2>
<a href="picture_1.png" class="thumbnail"><img
alt="Link_1"/></a>
<a href="picture_2.png" class="thumbnail"><img
alt="Link_2"/></a>
<div id="imageWrap">
<img src="picture_1.png" WIDTH="930" HEIGHT="470" alt="Main Image" id="mainImage"/>
</div>
Also, your css was pointing at an h1 tag, which didn't exist. I changed to to an h2 tag.
In the future, please be more clear with your questions. It was very confusing, however, I believe this answers your question.
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);
}