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>
Related
I'm struggling to get ondrop event firing. It doesn't fire even when calling event.preventDefault on dragenter and dragover. Actually only onDragEnter it's being fired.
style
.drop_zone {
border: 5px black dashed;
width: 300px;
height: 200px;
}
HTML
<body>
<div class="drop_zone"
ondragenter="onDragEnter(event)"
ondragover="onDragOver(event)"
ondrop="onDrop(event)" >
<p>Drag one or more files to this Drop Zone ...</p>
</div>
<script src="./index.js"></script>
</body>
javascript
function onDrop(e){
e.preventDefault();
}
function onDragEnter(e){
e.preventDefault();
}
function onDragOver(e){
e.preventDefault();
}
$(document).ready(function() {
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondrop = function (e) {
this.className = 'hidden';
e.preventDefault();
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function (event) {
document.getElementById('image_droped').className='visible'
$('#image_droped').attr('src', event.target.result);
}
reader.readAsDataURL(file);
};
});
.holder_default {
width:500px;
height:150px;
border: 3px dashed #ccc;
}
#holder.hover {
width:400px;
height:150px;
border: 3px dashed #0c0 !important;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>
<form method="post" action="http://example.com/">
<div id="holder" style="" id="holder" class="holder_default">
<img src="" id="image_droped" width="200" style="border: 3px dashed #7A97FC;" class=" hidden"/>
</div>
</form>
</body>
</html>
thanks for your help.
Actually the event it is being fired. It's a console bug. I set a debugger and a breakpoint within the onDropHandler method but it didn't hit them. But if I use a console.log as below it show me object.
function onDrop(e){
console.log(e);
console.log(e.dataTransfer.files[0])
e.preventDefault();
}
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>
I try to drag the image and drop it on the target div. However instead of dropping the image itself only the image path is displayed.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="DragAndDrop_2.css">
<script src="DragAndDrop_2.js" type="text/javascript"></script>
</head>
<body>
<img id="my-image" draggable="true" src="images/thumbUp.jpg" height="200">
<div id="target-box"> </div>
</body>
</html>
Stylesheet:
*{
margin:0px;
padding:0px;
}
#target-box {
width:600px;
height:600px;
border:1px solid black;
}
Javascript:
function initialFunction() {
picture = document.getElementById('my-image');
targetBox = document.getElementById('target-box');
picture.addEventListener('drag', drag, false);
targetBox.addEventListener('dragover', function(ev) { ev.preventDefault(); }, false);
targetBox.addEventListener('drop', drop, false);
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.outerHTML);
}
function drop(ev) {
var code = ev.dataTransfer.getData("Text");
targetBox.innerHTML = code;
}
window.addEventListener('load', initialFunction, false);
I heard about some issues with Drag and Drop operation in HTML5. I wonder if in this case it's a bug in API or perhaps I'm missing something.
I am trying to move my JQuery UIdraggable container into div(id="frame") but it is dragging everywhere in the webpage. So how can I move my draggable container into specific div(id="frame").So please give me a way to solve this problem. I am trying to make my own custom product designer plugin for which this my first feature.Here is my code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dragg</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<style>
#draggable {
overflow:hidden;
width: 100px;
height: 100px;
padding: 0.5em;
background-color: transparent;
}
#frame {
overflow:hidden;
width: 350px;
height: 500px;
padding: 0.5em;
border : 1px solid black;
}
</style>
</head>
<body>
<input type = "file" id="inputFileToLoadOuter">
<input type = "button" onclick = "loadImageFileAsURL(1)" value = "LoadOuterImage">
<input type = "file" id="inputFileToLoadInner">
<input type = "button" onclick = "loadImageFileAsURL(2)" value = "LoadInnerImage">
<div id="frame">
<img src="" id="OuterImg" style="width: 100% ; height:100%" />
</div>
<div id="draggable">
<img src="" id="InnerImg" style="width: 100% ; height:100%" />
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).resizable().draggable();
} );
function loadImageFileAsURL(pos)
{
if(pos == 1){
var filesSelected = document.getElementById("inputFileToLoadOuter").files;
}else{
var filesSelected = document.getElementById("inputFileToLoadInner").files;
}
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
if(pos == 1){
var imageLoaded = document.getElementById("OuterImg");
}else{
var imageLoaded = document.getElementById("InnerImg");
}
imageLoaded.src = fileLoadedEvent.target.result;
};
fileReader.readAsDataURL(fileToLoad);
}
}
}
</script>
</body>
</html>
plunker : https://plnkr.co/OubL3Uw0G7gi4d01yx0V
Modify your #draggable object to this
$("#draggable").resizable().draggable({
revert: "invalid",
});
and add this to make you #frame droppable
$('#frame').droppable({
accept: '#draggable',
})
Read up the jqueryui docs on this, there is much more you can achieve with this. See here https://jqueryui.com/droppable/#photo-manager
You need to use accept of droppable. Like this
$('#frame').droppable({
accept: '#draggable',
})
It will solve you problem :)
For more knowledge visit
JQuery UI
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>