Recently, I noticed that the drag and drop function was added back so that you could successfully drag an email from your Microsoft Outlook inbox to a web app's file upload. The issue is that once the file has been dragged to the web app, the email is moved to the Deleted folder in Outlook. Any ideas on how to resolve?
This issue can be solved by the web developper.
You can go to the following web page to see exemples with the different behaviors (copy, move, link) when we do a drag and drop in a browser:
https://codepen.io/SitePoint/pen/epQPNP
Put the following line into 'dragenter', 'dragover' and 'drop' event handler :
e.originalEvent.dataTransfer.dropEffect = "copy";
My code to solve the issue:
$('#myDropArea').on({
'dragenter': function (e) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.stopPropagation();
e.preventDefault();
$(this).addClass('draginprogress');
$(this).find('.DragText').css({ 'z-index': '1000' }).show()
},
'dragover': function (e) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.preventDefault();
e.stopPropagation();
},
'dragleave': function (e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass('draginprogress');
$(this).find('.DragText').hide();
},
'drop': function (e) {
var dataTransfer = e.originalEvent.dataTransfer;
$(this).removeClass('draginprogress');
$(this).find('.DragText').hide()
if (dataTransfer && dataTransfer.files.length) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.preventDefault();
e.stopPropagation();
//DO DROP action
}
}
});
I hope this helps
Most likely you are doing move instead of copy.
Related
i want to get more accessible my webabb deployed on Google Apps Script.
I tried to do this adding an embedded manifest:
<link rel="manifest" href='data:application/manifest+json,
{
"name":"SharePoint Title",
"short_name":"SP Title",
"description":"description",
"start_url":"get_script_url",
"icons":[
{
"src":"icon_url",
"sizes":"144x144","type":"image/png"
}
],
"background":"rgb(255,0,0)",
"theme_color":"rgb(255,255,255)",
"display":"fullscreen"
}'>
and this js code (as shown in https://developer.mozilla.org/:
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
But when I can't load the page from any mobile device: Google returns an error.
Does somebody know how could I solve the problem?
Thanks a lot
i am trying to clean my cache in a web application, so, i erase my css and put this function in my all.js archive, below document.ready:
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
console.log("entered the function");
window.applicationCache.addEventListener('updateready', function(e) {
console.log("entered the function 2");
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
the problem is, it don't cleans my cache, after erase my css it still shows the old one, and the console.log("entered the function 2") is not printing as well.
can anybody helps, please?
thank you a lot!
I solve my problem doing:
// Check if a new cache is available on page load.
window.addEventListener('beforeload', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
don't think is the right way, but works
I am listening for drop events on a div element. The events fire in Chrome (v36.0.1985), Firefox (v30) but do not fire in IE (v10.0.9200). I've created a simple JSFiddle to illustrate the problem.
Works:
1.) Open YouTube in Chrome
2.) Open http://jsfiddle.net/AXw6f/17/ in Chrome
3.) Drag a youtube video thumbnail onto the "DropZone" and an alert will appear.
Fails:
Redo the above but use IE 10 or 11. Instead of an alert in step 3 it simply redirects the page.
NOTE: I've found an example where IE would recognize a drop at http://jsfiddle.net/Ctnpe/ but it drops onto a canvas. When I replace the canvas with a div it reverts back to the redirect.
I've tried various combinations of preventDefault, stopPropogation, and return false with no success:
$("#DropZone").on("dragleave", function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$("#DropZone").on("dragenter", function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$("#DropZone").on("dragover", function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$('#DropZone').on('drop', function () {
alert('test');
event.preventDefault();
event.stopPropagation();
return false;
});
Any help is greatly appreciated. Thanks!
I have a javascript popup context menu with a button below it with close. That button when pressed close will continue to the next page. If a user dont click the close button and decides to click outside the popup box it will not redirect the user. What function for javascript can i add if a user click outside the box it will redirect them without clicking the close button inside the box. using a osx-modal-content plugin
How its triggered*
<input type='button' name='osx' value='Click Here To Enter The Website!' class='osx demo'/></a>
plugin page (link)
OSX STYLE DIALOG ** OSX STYLE DIALOG ** OSX STYLE DIALOG **
http://www.ericmmartin.com/projects/simplemodal-demos/
This is something that i have for the close function**
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
This is how you can do stuff on close:
$("#element-id").modal({
onClose: function () {
window.location.href = "http://stackoverflow.com";
}
});
If you had an element added like:
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
Change that to
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal({
onClose: function () {
window.location.href = "http://stackoverflow.com";
}
});
return false;
});
I am doing JSF primefaces project.We have primefaces file upload component in a div id="dropBox" which accepts drag and drop files.Normally if you drop a file anywhere on the page, browser opens it up.I want to disable this behavior and allow drops only in the div dropBox. following code disables file drag and drops on entire page .
$(document).bind({
dragenter: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
},
dragover: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
}
});