Html5: "ondrop" event does not fire when I drop an item - javascript

In my application I have the following html with js and stylesheet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drag'n'Drop demo</title>
<style>
#dropArea{
min-width:50%;
min-height:800px;
background-color:#FF00BB;
float: left;
}
#imgArea {
min-width:49%;
min-height:800px;
background-color:#0F0FBB;
float: right;
}
#imgArea img {
display:block;
margin:5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
var onDropCallback=function(event){
event.preventDefault();
console.log("Droped")
}
var dragSrart=function(event){
// alert("DragStarted")
console.log("Drag Started");
}
var ondragoverCallback=function(event){
var elem=event.target || event.srcElement;
$(elem).css('border',"1px solid black");
}
var dragEndCallback=function(event){
event.preventDefault();
console.log("Drag End HAppened");
$("#dropArea").css('border',"none");
}
</script>
</head>
<body>
<div id="dropArea" ondragover="ondragoverCallback(event)" ondrop="onDropCallback(event)" ></div>
<div id="imgArea">
<img draggable="true" ondragstart="dragSrart(event)" ondragend="dragEndCallback(event)" src="https://kazasou.files.wordpress.com/2010/08/g288.gif">
</div>
</body>
</html>
But for some reason even though the events ondragstart and ondragend gets fired I cannot figure out why the drop event does not fire at all. I have looked on https://www.w3schools.com/HTML/html5_draganddrop.asp and on https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop but I cannot figure out how different is my code from the examples.

As you can see on: https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop you must preventDefault during on dragover event so the ondragoverCallback should have the following code:
var ondragoverCallback=function(event){
event.preventDefault();
var elem=event.target || event.srcElement;
$(elem).css('border',"1px solid black");
}

Related

jquery mousedown event is not working

Here is my full code but cursor is not changing even "mousedown" event is triggered. After you release mouse button, so "mouseup" is triggered, cursor is changing.
How can I fix this?
$('#testing').on('mousedown', function(e) {
e.preventDefault();
$(this).css('cursor', 'pointer');
}).on('mouseup', function() {
$(this).css('cursor', 'crosshair');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testing" style="width: 100px; height: 200px; background: red"></div>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#testing').on('mousedown',function(e){
e.preventDefault();
$(this).css('cursor','pointer');
}).on('mouseup',function(){
$(this).css('cursor','crosshair');
});
});
</script>
</head>
<body>
<div id="testing" style="width:100px;height:200px;background:red"></div>
</body>
The above code works fine.

$(this).addClass is not working

While following a tutorial, I see style sheet is not applied to clicked element in the list. What Could be the possible reason?
The following sample works this way if some string is added to text box and then button is clicked, a new item gets added to list. If item in the list is clicked it should be stroked through.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#taskText').keydown(function (evt) {
if (evt.keyCode == 13) {
addTask(this, evt);
}
});
$('#addTask').click(function (evt) {
addTask(document.getElementById('taskText'), evt);
});
// following statements not working
$('#tasks li').live('click', function(evt) {
$(this).addClass('done');
});});
function addTask(textBox, evt) {
evt.preventDefault();
var taskText = textBox.value;
$('<li>').text(taskText).appendTo('#tasks');
textBox.value = "";
};
</script>
<style type="text/css">
.done{
text-decoration:line-through;
}
</style>
</head>
<body>
<ul id="tasks">
</ul>
<input type="text" id="taskText" />
<input type="submit" id="addTask"/>
</body>
</html>
The live() function was removed in jQuery 1.7 and does not exist at all in jQuery 2.x.
If you check your browser's developer console, chances are you'll see an error message along those lines.
$(document).ready(function() {
$('#addTask').click(function() {
var taskText = $('#taskText').val();
var li = $('<li>' + taskText + '</li>');
$('ul#tasks').append(li);
$('#taskText').val('');
$(li).click(function() {
$(this).toggleClass('done');
});
});
});
li {
font-family: arial;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
.done{
text-decoration: line-through;
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ul id="tasks">
<!-- List Goes Here... -->
</ul>
<!-- Textbox / Input Buttons -->
<input type="text" id="taskText" />
<input type="submit" id="addTask"/>
</body>
</html>
$('#tasks li').click(function(){
$(this).addClass('class-name');
};
should work. Check to make sure all your syntax is correct (ie. no random semicolons)
As mentioned by ceejayoz . The live() function was removed in jQuery 1.7 and does not exist at all in jQuery 2.x.
The reason your click on the list was not working is better explained on this question: Click event on dynamically generated list items using jquery
here's what the code could look like for you
$(document).ready(function() {
$('#taskText').keydown(function(evt) {
if (evt.keyCode == 13) {
addTask(this, evt);
}
});
$('#addTask').click(function(evt) {
addTask($('#taskText'), evt);
});
$('#tasks').on('click', 'li', function(evt) {
$(this).addClass('done');
});
});
function addTask(textBox, evt) {
evt.preventDefault();
var taskText = textBox.val();
$('<li>').text(taskText).appendTo('#tasks');
textBox.val("");
};
.done {
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tasks">
</ul>
<input type="text" id="taskText" />
<input type="submit" id="addTask" />

show div on click with Jquery

I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>

html5 drag/drop e.stopPropagation();

I have got the problem, that a window with the file content pops up though e.stopPropagation() is called. When I drag the file from the desktop in the div in my browser, my current tab is reloaded with the new content (pictures, text). As a browser I am using Chrome, but I have also tried it with Safari and Firefox!
I simply don't get it, here's my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>File Uploader</title>
<link href="../styles/allgemein.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">//-->
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">//-->
<!--<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>//-->
</head>
<body style="position:relative;">
<script>
var dropZone = document.getElementById('drag_upload');
dropZone.addEventListener('drop', handleDrop, false);
</script>
<script>
$(document).ready(function () {
$("#home").button();
$("#frm_logout").button();
});
function handleDrop(e) {
e.stopPropagation(); // Stops some browsers from redirecting.
e.preventDefault();
var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
alert(files[i]);
}
}
</script>
<div style="width:100%; text-align:center; font-family: Arial; font-size:28px;"><b>Cloudservice</b></div>
<form action="../" method="post">
<input type="submit" name="logout" value="Logout" id="frm_logout" style="z-index: 1000; float:right;"/>
</form>
<input type="button" value="Home" id="home"/>
<div style="width:100%; font-size:18px; text-align:left; font-family:Arial; position:absolute; left:5px; top:100px;">
<?php echo "User: " . $user . "<br/>Maximum <br/>upload size: " . $size . " MB<br/><br/>"; ?>
<a href="fileupload">
<div
style="width: 125px; height: 40px; background-color: #003366; text-align: center; font-family: Arial; border-radius: 10px; color:#CCC;">
<div style="top: 10px; position: relative;">Fileupload</div>
</div>
</a><br/>
<div style="width: 250px; height: 435px; border: 2px solid #003366; border-radius: 15px;">
<div style="position: relative; top:200px; text-align: center;" id="drag_upload">Drop File here to upload!</div>
</div>
</div>
</body>
</html>
Deleted Answer:
You'll need to use e.preventDefault() in conjunction
with e.stopPropogation() as the default behavior is to load the file
in the current tab.
Why it's wrong is that you had preventDefault, but it's also possible the event is out of scope. e.stopPropogation() will only prevent the event from going higher up the DOM tree to parent elements. Here's some clean-up of the code that tested fine for me:
$(document).ready(function () {
$("#home").button();
$("#frm_logout").button();
});
$('body').on('dragover drop', function(e) { e.preventDefault(); });
$(document).on('draginit dragstart dragover dragend drag drop', function(e) {
e.stopPropagation();
e.preventDefault();
});
$("#drag_upload").on('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
$(this).addClass('dragHover');
}).on('dragleave dragend', function(e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass('dragHover');
}).on('drop', function(e) {
e.stopPropagation(); // Stops parent elements from receiving event.
e.preventDefault(); // Stops some browsers from redirecting.
$(this).removeClass('dragHover');
$(this).addClass('loading');
if (window.FileReader) {
if (e.originalEvent.dataTransfer.files.length<1) {
// do stuff here
}
}
else alert('Internet Explorer 9 and below are not supported for this feature.');
});
I removed </script><script> as you can just continue the previous.
I used e.preventDefault() directly on both body & document to make sure it's not going to redirect the browser, although using both e.preventDefault() and e.stopPropogation() in the event should accomplish this, I'd rather be safe than sorry.
I made the functions inline using JQuery's .on() which has proven to be the most reliable way to me of binding events.
I also added some classes that are set/unset during the events, really just copy/paste remnants from code I use, but they're useful for styling the elements when events occur. Leave them or delete them, this is more for the user than yourself.
Next, you'll want to make sure the browser is capable of window.FileReader as there is no IE support below version 10.
Last, e.dataTransfer.files does not exist. You'll need e.originalEvent.dataTransfer.files (although as you've written it I'm not sure it's that way due to the scope of the event in the different methods).

Error in using contextmenu in jquery?

I want to create a contextmenu of a div tag to append some contents into it.
But when i right click many times continuously,my div tag contains more contents than i want.Here is my code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
#container{
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
}
#MyMenu{
position: absolute;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#container').bind('contextmenu',function(e){
e.preventDefault();
var x=e.pageX;
var y=e.pageY;
$('#MyMenu').css({'top': y+'px','left': x+'px'}).show();
$('#add').click(function(e){
var ContentToAppend='<p>My Content</p>';
$('#container').append(ContentToAppend);
});
});
});
</script>
</head>
<body>
<div id="container">
</div>
<ul id="MyMenu">
<li>Add</li>
<li>Delete</li>
</ul>
</body>
</html>
For example,if i right click 5 times continuously,in my div will contain 5 lines "My Content" although i only want 1 line.Can anyone explain why and solution for me?Thank a lot!
Try (See DEMO):
$(document).ready(function(){
$('#container').bind('contextmenu',function(e){
e.preventDefault();
var x=e.pageX;
var y=e.pageY;
$('#MyMenu').css({'top': y+'px','left': x+'px'}).show();
});
$('#add').click(function(e){
var ContentToAppend='<p>My Content</p>';
$('#container').append(ContentToAppend);
});
});​
The deal is that in your version you bind to #add element click event hendler each time user open context menu. So after 5 times it heppens there will be 5 click event hendlers, so if you then click on #add element you add '<p>My Content</p>' string to #container element 5 times.

Categories