so I have a draggable HTML div element:
<div id="server" draggable="true" ondragstart="return dragStart(event)">Server</div>
and a target div:
<div id="target1" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
if I drag the draggable into the target, then how do I get the value inside of the draggable if I only have the reference to the target that the draggable is in?
You might be looking to use the dataTransfer.setData method on the drag event and the datatransfer.getData method on the drop event. These methods will allow you to pass data between your elements.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
var newText = ev.target.innerText;
newText = "I've been dropped!";
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.setData("divData", newText);
console.log(ev.target); //available data
}
function drop(ev) {
var dragElemID = ev.dataTransfer.getData("text");
var dragElemData = ev.dataTransfer.getData("divData");
var draggedElem = document.getElementById(dragElemID)
ev.preventDefault();
ev.target.appendChild(draggedElem);
ev.target.children[0].innerText = dragElemData;
}
#div1{
border:1px solid;
width:100px;
height:150px;
}
#drag1{
background-color:lightblue;
width:100px;
height:100px;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">Target Div</div>
<div id="drag1"draggable="true" ondragstart="drag(event)" width="336" height="69">Drop Div</div>
Related
I have the following script that I put together with part of another, what I need is to change the images by dragging the red heart to the blue one, the blue takes the place of the red and vice versa.
Today the trawler wipes out the old ones.
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2"
src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/256/Heart-red-icon.png"
draggable="true" ondragstart="drag(event)" width="50px">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1"
src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/256/Heart-blue-icon.png"
draggable="true" ondragstart="drag(event)" width="50px">
</div>
Javascript:
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 allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
var element = document.getElementById(id)
var div = document.getElementById(id).parentNode;
var clonedHeart = document.getElementById(ev.target.id).cloneNode(true);
ev.target.parentNode.insertBefore(element, ev.target.id.nextSibling)
document.getElementById(ev.target.id).remove();
div.appendChild(clonedHeart);
ev.dataTransfer.clearData();
}
I hope this help you.
I am trying to drag an element and drop it in the textbox. However It is not working.I am not sure where I am doing wrong.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.textContent);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
var li = document.createElement("li");
li.innerHTML = data;
console.log(li);
// var data=document.createElement('p');
// data.innerHTML=ev.dataTransfer.getData("Text");
// console.log(data);
// console.log(typeof(data));
// ev.target.appendChild(document.getElementById(li));
ev.target.appendChild((li));
ev.preventDefault();
}
<span> <textarea name="name" rows="2" cols="37" ondrop="drop(event)" ondragover="allowDrop(event)" id="target1"></textarea> </span>
<div draggable="true" ondragstart="drag(event)" id="source">Sencha</div>
It seems like what you actually want to do is add the dragged text to the text input, instead of creating a new <li> element and then trying to add that to the text area. That would work if you were adding it to a <div>, for example, but you can't put HTML inside text inputs.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.textContent);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.innerHTML+=data;
ev.preventDefault();
}
<span> <textarea name="name" rows="2" cols="37" ondrop="drop(event)" ondragover="allowDrop(event)" id="target1"></textarea> </span>
<div draggable="true" ondragstart="drag(event)" id="source">Sencha</div>
I want to get the dataset-attributes "data-price" with two decimalnumbers of dragged div boxes via Javascript to sum them up.
Here my div box:
<div name="qty" id="black" data-price="21.1" draggable="true" ondragstart="drag(event)">
I tried to do it with this script
<script type="text/javascript">
function findTotal(){
var arr = document.querySelectorAll("se > div");
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].dataset.price))
tot += parseInt(arr[i].dataset.price);
}
document.getElementById('total').value = tot;
}
</script>
but it only counts the data-prices of the non-dragged boxes.
<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>
What i'm doing wrong here?
You should really add the whole HTML code for us to see how you have set the elements with form/name/attributes. I wrote a simple example based on your code and it works just fine for me and it calculates only the elements that are dropped to the target element. Also for decimal numbers, use parseFloat and not parseInt:
function findTotal(){
var arr = document.querySelectorAll(".target > div");
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].dataset.price))
tot += parseFloat(arr[i].dataset.price);
}
document.getElementById('total').textContent = tot;
}
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));
findTotal();
}
document.getElementById('reset').onclick = function() { window.location.reload(); }
#black {
background-color: black;
color:white;
}
#red {
background-color: red;
}
#yellow {
background-color: yellow;
}
#green {
background-color: green;
color:white;
}
.qty {
width:50px;
height:50px;
display: inline-block;
margin-right:5px;
margin-bottom:5px;
}
.target {
height:100px;
border:1px solid grey;
}
<button id="reset">Reset</button>
<hr>
<form>
<div class="qty" id="black" data-price="21.1" draggable="true" ondragstart="drag(event)">21.1</div>
<div class="qty" id="red" data-price="16.5" draggable="true" ondragstart="drag(event)">16.5</div>
<div class="qty" id="yellow" data-price="7.8" draggable="true" ondragstart="drag(event)">7.8</div>
<div class="qty" id="green" data-price="3.5" draggable="true" ondragstart="drag(event)">3.5</div>
<h3>Drop items here</h3>
<div class="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<h3>Total: </h3>
<div id="total"></div>
</form>
My example can also be found here: http://zikro.gr/dbg/html/jsdd/
For example:
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" width="75" height="75" />
I want to drag the x.png file and drop it into the div, but x.png will move into the div if I do so. How can I achieve that, after I drag and drop, the div gets a x.png, and the original x.png is still where it was?
You can do that by duplicating the required DOM element by using cloneNode(true) method
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
ev.preventDefault();
}
</script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true"
ondragstart="drag(event)" width="75" height="75" />
I will stick to the example shown here: http://www.w3schools.com/html/html5_draganddrop.asp
Assuming we have this document:
<!DOCTYPE HTML>
<html>
<head>
<script>
<!-- script comes in the text below -->
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Normal Drag & Drop
Normal drag and drop has such functions assigned to the respective elements:
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));
}
Drag & Copy
Whereas you'll have to alter the drop function so that it copies the DOM element instead of moving it.
//other functions stay the same
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
Try this page: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
And then append a .cloneNode(true) to getElementById(data).
You could even do things like in file managers: Ctrl-Key switches from moving to copying:
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
if (ev.ctrlKey)
ev.target.appendChild(document.getElementById(data).cloneNode(true));
else
ev.target.appendChild(document.getElementById(data));
}
I tried swapping two elements inside div1 and div2 tag but only the first replace function executes properly the other element is not swapped
either one of the div is getting swapped at once but when i try to swap both at same time it doesn't happen please help me out
*
<head>
<style type="text/css">
#div1 {
width:350px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
#div2 {
width:350px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
var child = ev.target;
var parents = child.parentNode;
ev.dataTransfer.setData("child1", child.id);
ev.dataTransfer.setData("parent1", parents.id);
}
function drop(ev) {
ev.preventDefault();
var childid1 = ev.dataTransfer.getData("child1");
var parentid1 = ev.dataTransfer.getData("parent1");
var parent1 = document.getElementById(parentid1);
var c = ev.currentTarget.childNodes;
var childid2 = c[1].id;
parent1.replaceChild(c[1], document.getElementById(childid1));
var parent2 = ev.currentTarget;
parent2.removeChild(c[1]);
parent2.appendChild(document.getElementById(childid1));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<br>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="236" height="49">
</div>
</body>
I think your fundamental flaw is that you do not cater for the fact that when you do your first replaceChild, the image you are inserting is removed from its parent so it is no longer there to replace with the second image.
I found your variable names somewhat confusing, and have rewritten your code in a simpler fashion as follows:
function allowDrop (ev) {
ev.preventDefault ();
}
function drag (ev) {
ev.dataTransfer.setData ("src", ev.target.id);
}
function drop (ev) {
ev.preventDefault ();
var src = document.getElementById (ev.dataTransfer.getData ("src"));
var srcParent = src.parentNode;
var tgt = ev.currentTarget.firstElementChild;
ev.currentTarget.replaceChild (src, tgt);
srcParent.appendChild (tgt);
}
You can test this code at jsFiddle