I'm doing a Drag and Drop project where when dropping an image in another Div, it has to stay in the same place where I left it.
The problem is the img are lining up the left.
HTML CODE :
<html>
<head>
<link type="text/css" rel="stylesheet" media="screen" href="css/testednd.css" /> <!-- CSS das div's -->
<script src="js/testednd.js"></script> <!-- Script clickImagem -->
</head>
<body>
<div id="conteudo-left" style="position:static; left:10px; top:20px; width:300; height:660; z-index:-1; overflow: auto">
<form name="form_dnd_left" border = 1>
<ul>
<li><img id="drag1" src="images/Comp3.jpg" draggable="true" ondragstart="drag(event)" alt="" /></li>
</ul>
</form>
</div>
<div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)"><!-- abrimos a div conteudo do meio-->
</div>
</body>
</html>
CSS CODE
#conteudo-left{
width:300px;
height:660px;
float:left;
background-color:#FFF;
}
#conteudo{
width:600px;
height:460px;
float:left;
background-color:#ff1;
display: initial;
margin: auto;
.columns {
}
}
JavaScript Code
///Drag'n Drop functions
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "copy";
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img");
var original = document.getElementById(data);
copyimg.src = original.src;
ev.target.appendChild(copyimg);
}
Can somebody help me??
Thanks for all !!
Update:
From the event you can get the position of the drag and minus the offset of the parent, thus we can drop it in that exact location.
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img");
var parent = document.createElement("conteudo");
var original = document.getElementById(data);
copyimg.src = original.src;
copyimg.style.position = "absolute";
copyimg.style.left = ev.clientX - ev.target.offsetLeft+"px";
copyimg.style.top = ev.clientY - ev.target.offsetTop+"px";
ev.target.appendChild(copyimg);
}
Old Answer:
Do you want something like this?
CSS used to make this is:
padding-left: 150px;
padding-top: 125px;
box-sizing: border-box;
So I gave half of the width and height as padding so that the images get positioned there! also I am using box-sizing:border-box so that the padding does not get added to the dimensions of the div.
Note: I have reduced the dimesions of the boxes so that they fit perfectly inside the demo window, please set the padding-top andpadding-left` to about half of the width of the respective dimensions!
///Drag'n Drop functions
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "copy";
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img");
var parent = document.createElement("conteudo");
var original = document.getElementById(data);
copyimg.src = original.src;
copyimg.style.position = "absolute";
copyimg.style.left = ev.clientX - ev.target.offsetLeft+"px";
copyimg.style.top = ev.clientY - ev.target.offsetTop+"px";
ev.target.appendChild(copyimg);
}
#conteudo-left{
width:150px;
height:330px;
float:left;
background-color:#FFF;
}
#conteudo{
width:300px;
height:250px;
position:relative;
float:left;
background-color:#ff1;
display: initial;
margin: auto;
}
<html>
<head>
<link type="text/css" rel="stylesheet" media="screen" href="css/testednd.css" /> <!-- CSS das div's -->
<script src="js/testednd.js"></script> <!-- Script clickImagem -->
</head>
<body>
<div id="conteudo-left" style="position:static; left:10px; top:20px; width:300; height:660; z-index:-1; overflow: auto">
<form name="form_dnd_left" border = 1>
<ul>
<li><img id="drag1" src="http://via.placeholder.com/50x50" draggable="true" ondragstart="drag(event)" alt="asdfasdf" /></li>
</ul>
</form>
</div>
<div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
</html>
On the drop event you get the x and y coords of the mouse and set the style to be absolute in that position. Note that the top left corner of the image will snap to the exact coord of the mouse pointer. See below:
///Drag'n Drop functions
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "copy";
}
function drop(ev)
{
ev.preventDefault();
var x = ev.clientX;
var y = ev.clientY;
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img");
var original = document.getElementById(data);
copyimg.src = original.src;
ev.target.appendChild(copyimg);
copyimg.setAttribute("style", "position: absolute; top: "+y+"px; left:"+x+"px;");
}
#conteudo-left{
width:150px;
height:330px;
float:left;
background-color:#FFF;
}
#conteudo{
width:300px;
height:250px;
float:left;
background-color:#ff1;
display: initial;
margin: auto;
box-sizing: border-box;
}
<html>
<head>
<link type="text/css" rel="stylesheet" media="screen" href="css/testednd.css" /> <!-- CSS das div's -->
<script src="js/testednd.js"></script> <!-- Script clickImagem -->
</head>
<body>
<div id="conteudo-left" style="position:static; left:10px; top:20px; width:300; height:660; z-index:-1; overflow: auto">
<form name="form_dnd_left" border = 1>
<ul>
<li><img id="drag1" src="http://via.placeholder.com/50x50" draggable="true" ondragstart="drag(event)" alt="asdfasdf" /></li>
</ul>
</form>
</div>
<div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
</html>
Related
I have image that I want to drag and drop infinitely.From first box to second box when I move,image disappear from first box.Not to lose image created same image on first box again using .appendchild(img) method.I want to drag image from initial position,not from where I dropped.So I changed draggable property as false when I dropped image into box.It creates image on first box,there's no problem.But I can't drag and drop it from first box to third again because that image has no event properties.I want to give them those properties again and it should be repeated because I want to do it forever.
Here's what I tried
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2,#div3 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</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));
var img = document.createElement("img");
img.src = "https://mikasasports.com/wp-content/uploads/2015/04/MVA2001.png";
var src = document.getElementById("div1");
img.style.width="88px";
img.style.height="31px";
src.appendChild(img);
drag1.draggable=false;
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the three div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://mikasasports.com/wp-content/uploads/2015/04/MVA2001.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
i have 2 css classes , left side and right side of screen and i need to put them togheter, in these classes i have images which look like a puzzle:
By dragging image from the right side to the left side.At drop,must fit with the image from left side. I read about drag and drop but didnt find something like that :(
What i've tried?
EDIT: http://postimg.org/image/je31ptb6d/ (this is an example with my pictures.On top are images separated as classes - class="left" for ca and class="right" for nă.On bottom are images after i drop the image from right to one from left.My question is how to specify the correct drop zone to make images look like bottom one from link after i drop image from right side? )
JS/Jquery:
// shuffle function for right side only
$(document).ready(function() {
var a = $(".right > img").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var bi = a[i];
var bj = a[j];
a[i] = bj;
a[j] = bi;
}
$(".right").append(a);
});
// drag and drop
$(function() {
$( ".right img" ).draggable
({
cursor: 'move',
revert: 'invalid',
});
$( ".left img" ).droppable({
tolerance: 'fit',
});
});
HTML:
<div class="left">
<img class="piese" id="piesa1" src="images/Text_1.svg" />
<img class="piese" id="piesa2" src="images/Text_2.svg" />
<img class="piese" id="piesa3" src="images/Text_3.svg" />
<img class="piese" id="piesa4" src="images/Text_4.svg" />
</div>
<div class="right">
<img class="piese" id="piesa5" src="images/Text_5.svg" />
<img class="piese" id="piesa6" src="images/Text_6.svg" />
<img class="piese" id="piesa7" src="images/Text_7.svg" />
<img class="piese" id="piesa8" src="images/Text_8.svg" />
</div>
To solve your problem you must build a grid
and use drag drop by taking as a reference the location of the squares of the grid.
This is a simple example to give you an idea.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#grid{
background-color: #09F;
height: 130px;
width: 390px;
position:relative;
margin:100px auto;
}
.square{
height: 128px;
width: 128px;
border:1px solid #999;
float:left;
}
#first-image{
position: absolute;
left: 0px;
}
#second-image{
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<!--take two images by 120px with this class and id -->
<div id="grid">
<img class="dr" id="first-image" src="your-image.png" width="128" height="128">
<img class="dr" id="second-image" src="your-image.png" width="128" height="128">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(xx = 0; xx < 3; xx++) {
$("#grid").append($('<div class="square"></div>'));
};
$('.dr').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('div.square').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
de=$('#'+data).detach();
var x = $(this).position().left;
var y = $(this).position().top;
de.css({'position':'absolute','top':y+'px','left':x+'px'}).appendTo($(this));
};
});
});
</script>
</body>
</html>
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
Jsfiddle
I trying to activate my current scroll while I am outside that scroll, specifically in #DivDet
here is what I tried:
$("div#DivDet").scroll(function () {
// I don't know what i should have here
// something like $("div#scrlDiv").scroll();
});
It sounds like you want to respond to a scroll on one div by scrolling another.
You've already determined how to hook the scroll event. To set the scroll position of an element (the other div), you set the element's scrollTop and scrollLeft values (which are in pixels). If you want two divs to scroll in near-unison, for instance, you'd assign the source div's scrollTop and scrollLeft to the target div.
Example: Live Copy | Source
Relevant JavaScript:
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
or alternately (source):
(function() {
var target = $("#target")[0]; // <== Getting raw element
$("#source").scroll(function() {
target.scrollTop = this.scrollTop;
target.scrollLeft = this.scrollLeft;
});
})();
Full page:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>Scroll Example</title>
<style>
.scroll-example {
display: inline-block;
width: 40%;
border: 1px solid black;
margin-right: 20px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<p>Scroll the left div, watch the right one.</p>
<div id="source" class="scroll-example">
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
</div>
<div id="target" class="scroll-example">
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
</div>
<script>
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
</script>
</body>
</html>
Solution with Vanilla JavaScript
const multiElementScroll = ( elem1, elem2 ) => {
elem1.onscroll = function() {
elem2.scrollTop = this.scrollTop;
};
}
multiElementScroll( div1, div2 )
section {
display: flex;
justify-content: space-between;
}
.scroll-box {
width: 200px;
height: 200px;
overflow-y: scroll;
border: 1px solid #d99;
}
.scroll-box h2 { margin-top: 50px; }
<section>
<div class="scroll-box" id="div1">
<h1>A</h1>
<h2>B</h2>
<h2>C</h2>
<h2>D</h2>
<h2>E</h2>
<h2>F</h2>
<h2>G</h2>
<h2>H</h2>
</div>
<div class="scroll-box" id="div2">
<h1>1</h1>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
</div>
<section>
I want to create a list of images that can be dragged and dropped into a container.
Then I want to iterate the list of images and render them. The code below works only for images that are outside of the array(boxA). How do I implement this design as to have the images that are inside the array to be drag-and-drop-able inside the container (boxB)?
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
margin-left:auto;
margin-right:auto;
width:980px;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB{
float:right;
padding:10px;
margin:10px;
}
#boxB { background-color: #FF6699; width:500px; height:500px; }
#lolo {
padding:10px;
width:800px;
list-style:none;
float:left;
}
#lolo ul{
display:inline;
}
#lolo ul li{
display:inline;
}
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
<-- this my array -->
var myArray = new Array;
myArray[0] = '<img src="image/pic1.png">'
myArray[1] = '<img src="image/pic2.png">'
myArray = ev.dataTransfer.getData("text");
function lala(){
for (var i=0; i < myArray.length; i++)
{
document.write("<ul>" + "<li>" + myArray[i] + "</li>" + "</ul>");
}
}</script>
</head>
<body>
<!-- this the HTML code -->
<div id="boxA" draggable="true"
ondragstart="return dragStart(event)">
</div>
<div id="lolo">
<script>
lala();
</script>
</div>
<div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
</div>
</body>
</html>
Give 'id's to images and use ondragstart handler for div 'lolo'
myArray[0] = '<img id="img1" src=........
myArray[1] = '<img id="img2" src=........
.....
<div id="lolo" ondragstart="return dragStart(event)">
......
</div>
`