HTML5 drag and drop not working on IE11 - javascript

Got HTML5 native drag and drop applied, drop is no working with IE, working well with chrome and firefox.
the dragging appears to be working but drop isnt happaning on IE.
another small question - in IE i got a half transparent square around my draggable element, but its background is transparent(the image is done like that), and on chrome/firefox i dont have that square and the image look without any background while dragging.
this is the drop area:
<div id="4x2" class="dropArea" draggable="false" ondragenter="drag_enter(event); return false;" ondrop="drag_drop(event); return false;" ondragover="return false" ondragleave="drag_leave(event); return false;" data-droppable="true" onmouseover="return mouseOver(this); return false;" onclick="return movePlayer(this); return false;" onmouseout="return mouseOut(this); return false;">
</div>
this is the draggable element:
<div id="player1" draggable="true" ondragstart="drag_start(event); return false;" ondragend="drag_end(event); return false;" data-droppable="false" onclick="return selectPlayer(this); return false;" data-selectable="true"></div>
function drag_start(e)
{
e.dataTransfer.effectallowed = 'copy';
e.dataTransfer.dropEffect = 'copy';
e.dataTransfer.setData("text/plain", e.target.getAttribute('id'));
}
function drag_enter(e) {
if (e.target.getAttribute('data-droppable') == 'true') {
e.target.style.backgroundImage = "url(images/board_cell_background_highlight.png)";
}
function drag_leave(e) {
if (e.target.getAttribute('data-droppable') == 'true') {
e.target.style.backgroundImage = "url(images/board_cell_background.png)";
}
function drag_drop(e) {
var element = e.dataTransfer.getData("Text"); // the player
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
if (e.target.getAttribute('id') == "player1" || e.target.getAttribute('id') == "player2") {
alert("invalid Move");
return false;
}
e.target.style.backgroundImage = "url(images/board_cell_background.png)";
moveHandler(element, e.target.getAttribute('id'));
}
function drag_end(e) {
e.dataTransfer.effectallowed = 'copy';
alert("drop end")
}
}
}
I remove some code of printing stuff to make the code more shorter.

IE10/11 uses Text as the data string and it breaks if you use text/plain.
If you use Text, it breaks in Firefox.
I get around this by doing something like this in whatever drag and drop functions I need to write:
var setDataString = 'text/html';
// We need to change the setDataString type for IE since IE doesn't support setData and getData correctly.
this.changeDataStringForIe = (function() {
var userAgent = window.navigator.userAgent,
msie = userAgent.indexOf('MSIE '), //Detect IE
trident = userAgent.indexOf('Trident/'); //Detect IE 11
if (msie > 0 || trident > 0) {
setDataString = 'Text';
return true;
} else {
return false;
}
})();
I'd love to know of a solution that doesn't use userAgent sniffing.

You are setting data of type text/plain, but retrieving data of type Text. While some browsers might understand them to be one and the same, others may not. In this case, it seems Internet Explorer is being pedantic while Chrome and Firefox are being lax.
Personally, I'd suggest using Text. It might be old, but that's what would make it work fine, even as far back as IE5, if memory serves, given some small adjustments to the event handling.

If someone does not drag and drop in IE 8.1 W at 11 just in the Internet Options Security tab and remove the check mark box protected mode or run IE as administrator

The problem is the browser defaults to pan actions rather than touch actions...look at http://msdn.microsoft.com/en-us/library/ie/dn265022(v=vs.85).aspx for information on how to control default action in css.

Related

Add link button does not work properly for wysiwyg editor in IE and Firefox

The wysiwyg runs smoothly in chrome but in Firefox & IE11(not an old one), whenever I click on the add link button, the focus gets shifted to the main editor. I tried many workarounds like manipulating the CSS, stopping the event propagation on click of the input Add link input, but nothing seems to work.
Open link http://mindmup.github.io/bootstrap-wysiwyg/ in IE11, click on add link icon then click on the URL box and then try to enter anything
I've added a workaround for Firefox(which run on document load), but it still does not work for IE.
msieVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./) || typeof InstallTrigger !== 'undefined') // If Internet Explorer, return version number
{
$('a.essay-btn').on('click', function(e){
let self= $(this).closest('.hero-unit');
self.find('.add_link').show();
return false;
})
let span2 = 'http://';
$('.span2').on('keyup', function(f) {
span2 = ''+this.value+'';
return false;
})
$('.essay-btn-add').on('click', function(g){
let self= $(this).closest('.hero-unit');
let editor = self.find('.editor');
editor.html(editor.html()+span2);
self.find('.add_link').hide();
return false;
})
}
else // If another browser, return 0
{
// alert('otherbrowser');
return false;
}
}

PrtScn Button in the IE not behaving as other browsers using java script

I've been using the following javascript code that blocks Normal users (not professionals of course) from using print screen & Ctrl+A & Ctrl+C on the browser.
it does work as expected on Firefox & Chrome but it sometimes works on IE and some other times it fails. Please review the code if you can a little help of maybe what's going wrong on IE. and why it fails?
function disableselect(e) {
return false;
}
function reEnable() {
return true;
}
document.onselectstart = new Function("return false");
if (window.sidebar) {
document.onmousedown = disableselect;
document.onclick = reEnable;
}
function copyToClipboard() {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", "You can no longer give print-screen. This is part of the new system security measure");
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
alert("You can no longer give print-screen. This is part of the new system security measure.");
}
$(window).keyup(function(e){
if(e.keyCode == 44){
copyToClipboard();
}
});
$(window).focus(function() {
$("body").show();
}).blur(function() {
$("body").hide();
});
I have tested it and it works for me using Chrome, Firefox, IE11.
But, if someone use Inspect Element to disable CSS restriction, then he will disable it :)

Script works partially in Chrome and IE but not in Firefox

The following code works somewhat in chrome and IE but not in Firefox.
The idea is to force users to check an "Agree" box before advancing by following either one of the possible links available.
<script type="text/javascript">
function agreeCheck()
{
valid = false;
var agree = document.getElementById('agree');
if(isAgree(agree)){
valid= true;
}
return valid;
}
function isAgree(elem)
{
if ( elem.checked == false )
{
Show_Stuff(agreespan, "true");
return false;
}
else
{
Show_Stuff(agreespan, "false");
return true;
}
}
function Show_Stuff(warning,on_off)
// Function that will swap the display/no display for
// all content within span tags
{
if ((warning.style.display == "none")&&(on_off =="true"))
{
warning.style.display = "";
}
else
{
warning.style.display = "none";
}
}
</script>
<input type="checkbox" name="agree" value="signed" id="agree">
I agree</input> <span ID="agreespan" style="display: none">
<font color="red">You must agree in order to proceed</font>
</span>
<button type="button" title="Proceedt" class="btn-proceed" onclick="if (agreeCheck()==true){ window.location='myURL'; } else{ return agreeCheck();}"></button>
<input type="image" src="anotherURL" title="myTitle" onClick="return agreeCheck();"/>
Notes:
obviously myURL and anotherURL are
actual valid URLs
clicking on the first button when the box is not checked prevents the page from progressing but does not reveal the error message in the span in Chrome and IE. In Firefox it does nothing regardless of the box status
clicking the image link (input type="image") when the box is not checked works well in Chrome and IE and the error message appears. In Firefox the link is followed regardless of the box's status.
I realize that this could be written differently to simplify things. The problem is that I am implementing this in Magento where I only have access to chunks of code separately so I can't combine the parts of the If Else statement in a separate function.
**edit: I changed the if statement (one line before last) to
if (agree.checked ==true){ ...
this fixed the issue in chrome and IE and now those browsers are behaving properly. Firefox is still not doing what I want it to do
The problem is in isAgree function. Try the following:
function isAgree(elem)
{
if (!elem.checked == "Checked")
{
Show_Stuff(agreespan, "true");
return false;
}
else
{
Show_Stuff(agreespan, "false");
return true;
}
}
Hope it solves the issue. The solution resolves around this "checked" property.
span_tag.style.display is used for layout purposes not to hide or show the span tag
It doesn't work in your case because the JavaScript is probably breaking.
Try changing everything to use the following code
warning.style.visibility = "hidden";
warning.style.visibility = "visible";

JavaScript: Disable text selection via doubleclick

When double-clicking on a html page most browsers select the word you double-click on (or the paragraph you triple-click on). Is there a way to get rid of this behavior?
Note that I do not want to disable regular selection via single-click+dragging; i.e. jQuery UI's $('body').disableSelection() and the document.onselectstart DOM event are not what I want.
I fear you can't prevent the selection itself being "native behavior" of the browser, but you can clear the selection right after it's made:
<script type="text/javascript">
document.ondblclick = function(evt) {
if (window.getSelection)
window.getSelection().removeAllRanges();
else if (document.selection)
document.selection.empty();
}
</script>
Edit: to also prevent selecting whole paragraph by "triple click", here is the required code:
var _tripleClickTimer = 0;
var _mouseDown = false;
document.onmousedown = function() {
_mouseDown = true;
};
document.onmouseup = function() {
_mouseDown = false;
};
document.ondblclick = function DoubleClick(evt) {
ClearSelection();
window.clearTimeout(_tripleClickTimer);
//handle triple click selecting whole paragraph
document.onclick = function() {
ClearSelection();
};
_tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
};
function RemoveDocumentClick() {
if (!_mouseDown) {
document.onclick = null;
return true;
}
_tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
return false;
}
function ClearSelection() {
if (window.getSelection)
window.getSelection().removeAllRanges();
else if (document.selection)
document.selection.empty();
}​
Live test case.
Should be cross browser, please report any browser where it's not working.
The following works for me in the current Chrome (v56), Firefox (v51) and MS Edge (v38) browsers.
var test = document.getElementById('test');
test.addEventListener('mousedown', function(e){
if (e.detail > 1){
e.preventDefault();
}
});
<p id="test">This is a test area</p>
The MouseEvent.detail property keeps track of the current click count which can be used to determine whether the event is a double, tripple, or more click.
Internet explorer unfortunately does not reset the counter after a timeout period so instead of getting a count of burst-clicks you get a count of how many times the user has clicked since the page was loaded.
Just put this on the css interested section
-moz-user-select : none;
-khtml-user-select : none;
-webkit-user-select : none;
-o-user-select : none;
user-select : none;
If you really want to disable selection on double-click and not just remove the selection afterwards (looks ugly to me), you need to return false in the second mousedown event (ondblclick won't work because the selection is made onmousedown).
**If somebody wants no selection at all, the best solution is to use CSS user-select : none; like Maurizio Battaghini proposed.
// set to true if you want to disable also the triple click event
// works in Chrome, always disabled in IE11
var disable_triple_click = true;
// set a global var to save the timestamp of the last mousedown
var down = new Date().getTime();
var old_down = down;
jQuery(document).ready(function($)
{
$('#demo').on('mousedown', function(e)
{
var time = new Date().getTime();
if((time - down) < 500 &&
(disable_triple_click || (down - old_down) > 500))
{
old_down = down;
down = time;
e.preventDefault(); // just in case
return false; // mandatory
}
old_down = down;
down = time;
});
});
Live demo here
Important notice: I set the sensitivity to 500ms but Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable. - api.jquery.com
Tested in Chrome and IE11.
Just to throw this out there, but here's the code I slap into my pages where I expect users to be clicking rapidly. However, this will also disable standard click-n-drag text selection.
document.body.onselectstart = function() {
return false;
}
document.body.style.MozUserSelect = "none";
if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) {
document.body.onmousedown = function() {
return false;
}
}
Seems to work well for me.

Javascript IFrame/designmode and onkeydown event question

Apologize if this is answered already. Went through some of the related questions and google, but ultimately failed to see why this isn't working.
My code is as follows
<iframe id="editor"></iframe>
editorWindow = document.getElementById('editor').contentWindow;
isCtrlDown = false;
function loadEditor()
{
editorWindow.document.designMode = "on";
editorWindow.document.onkeyup = function(e) {
if (e.which == 91) isCtrlDown = false;
}
editorWindow.document.onkeydown = handleKeyDown;
}
function handleKeyDown(e)
{
if (e.which == 91) isCtrlDown = true;
if (e.which == 66 && isCtrlDown) editFont('bold');
if (e.which == 73 && isCtrlDown) editFont('italic');
}
function editFont(a,b)
{
editorWindow.document.execCommand(a,false,b);
editorWindow.focus();
}
This code works perfectly in Chrome, but the keyboard shortcuts do not work in Firefox. In fact, in Firefox it does not seem to register the events for keyup/keydown at all.
Am I doing something grossly wrong here that is mucking up Firefox?
For editable documents, you need to use addEventListener to attach key events rather than DOM0 event handler properties:
editorWindow.document.addEventListener("keydown", handleKeyDown, false);
If you care about IE 6-8, you will need to test for the existence addEventListener and add the attachEvent equivalent if it is missing.
Try using:
editorWindow = document.getElementById('editor').frameElement;
I'm not sure this will solve the issue, it may also be:
editorWindow = document.getElementById('editor').contentDocument;
Or even possibly:
editorWindow = document.getElementById('editor').frameElement.contentDocument;
One thing you can do is put the entire string in a try statement to catch any errors and see if the content is being grabbed from within the iframe.
try { editorWindow = document.getElementById('editor').contentWindow; } catch(e) { alert(e) };
The only other thought I have is that you're typing into a textbox which is within an iframe, and you may possibly have to add the onkeydown event to that specific item, such as:
var editorWindow = document.getElementById('editor').contentDocument;
var textbox = editorWindow.getElementById('my_textbox');
function loadEditor()
{
editorWindow.document.designMode = "on";
textbox.onkeydown = function(e) {
alert('hello there');
}
}
I hope one of these is the solution. I often find when it comes to cross-platform functionality it often boils down to a little trial and error.
Good Luck!

Categories