highlight for dragEnter - javascript

I am performing drap and swap in javascript. I want to highlight when dragged element is placed on top of other draggable elements. For this I am using dragEnter and dragLeave events. But these are not working as expected. Here I have attached stakblitz link for the sample. Can anyone help me to fix this issue? I want a element to be in highlighted state when the dragged element on top of it.
In the above example I can drag A to the others(It can be B, C or D). when I dragged A and move to C(B or D) means C(B or D) should be highlighed.

Replace this with lastEle here:
function handleDragEnter(e) {
//lastEle ? this.classList.remove('over'): '';
lastEle ? lastEle.classList.remove('over'): '';
this.classList.add('over');
lastEle = this;
}

document.addEventListener('DOMContentLoaded', (event) => {
var dragSrcEl = null;
let lastElem;
function handleDragStart(e) {
this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function handleDragEnter(e) {
lastElem ? lastElem.classList.remove('over') : '';
this.classList.add('over');
lastElem = this;
}
function handleDragLeave(e) {
// this.classList.remove('over');
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
function handleDragEnd(e) {
this.style.opacity = '1';
items.forEach(function (item) {
item.classList.remove('over');
});
}
let items = document.querySelectorAll('.container .box');
items.forEach(function (item) {
item.addEventListener('dragstart', handleDragStart, false);
item.addEventListener('dragenter', handleDragEnter, false);
item.addEventListener('dragover', handleDragOver, false);
item.addEventListener('dragleave', handleDragLeave, false);
item.addEventListener('drop', handleDrop, false);
item.addEventListener('dragend', handleDragEnd, false);
});
});
Try this changes. It will work.

Related

I have written a module in js which handles the drag of HTML elements on a page but it does not work on Android

The drag handler module does not work on Android.
It works on IOS and Windows.
Expecting to work on Android phones, just like on IOS or Windows.
How it should work on mobile: long tap to an element, drag the element over an other, release tap.
It works exactly like that on other OSes. Other module is calling the init() method every time it wants to reinit the drag handler.
Here is the module's code:
import * as devices from "./devices.js"
var items = [];
var dragSrcEl = null;
var init = function(){
items = document.querySelectorAll('.expander');
items.forEach(function (item) {
removeListeners(item);
addListeners(item);
});
}
var removeListeners = function (item) {
item.removeEventListener('dragstart', handleDragStart);
item.removeEventListener('dragend', handleDragEnd);
item.removeEventListener('dragover', handleDragOver);
item.removeEventListener('dragenter', handleDragEnter);
item.removeEventListener('dragleave', handleDragLeave);
item.removeEventListener('drop', handleDrop);
}
var addListeners = function (item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('drop', handleDrop);
}
var handleDragStart = function(e) {
this.style.opacity = '0.4';
}
var handleDragEnd = function(e) {
this.style.opacity = '1';
}
var handleDragStart = function(e) {
this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
var handleDragEnd = function(e) {
this.style.opacity = '1';
items.forEach(function (item) {
item.classList.remove('over');
});
}
var handleDragOver = function(e) {
e.preventDefault();
return false;
}
var handleDragEnter = function(e) {
this.classList.add('over');
}
var handleDragLeave = function(e) {
this.classList.remove('over');
}
var handleDrop = function(e) {
e.stopPropagation(); // stops the browser from redirecting.
if (dragSrcEl !== this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
devices.reorderByDom();
}
return false;
}
export{init}
Tested on chrome,firefox and edge in Android.

How to run a child event only once

I want to do mouseleave only once after focus triggered. How?
I try several options like off,preventDefault,stopPropagation, return false; but none have worked.
Thank you in advance.
addEvent(date, 'focus', function () {
console.log("focuz" + this.innerHTML);
document.designMode = 'on';
addEvent(swap_date, 'mouseleave', function (e) {
console.log("mouseleave" + this.innerHTML);
//document.designMode = 'on';
$(this).off(e);
e.preventDefault();
e.stopPropagation();
return false;
});
});
fixed in mouseenter event to trigger the check with stop var.
Once mouseleave happends, the stop is on.
addEvent(swap_date, 'mouseenter', function () {
stop = false;
});
addEvent(swap_date, 'focus', function () {
document.designMode = 'on';
if (this.innerHTML != "") {
$(document).ready(function () {
$('.swapDate').bind('mouseleave', function (event) {
if (!stop && this.innerHTML != "")
checkDate(this.innerHTML);
stop = true;
$('.swapDate').unbind('mouseleave');
});
});
}
});

JS Drag and drop with DOM

With this tutorial i made simple drag and drop web app. But I cant do it with DOM. Here is my code jsfinddle . It is not working on jsfiddle but if u download it it will. The script should be placed behind the divs. When you uncoment <div class="column" draggable="true"><span>A</span></div> it will work (not in jsfiddle). So how can i made it with DOM ?
Going off the assumption you meant doing the draggable with dynamically created elements, I've updated your jsfiddle. http://jsfiddle.net/7c3v0s1s/6/ I wrapped the code in a namespace while doing the changes.
HTML
<div class="containter">
<div id="columns"></div>
</div>
Javascript
var localNameSpace = {
dragSrcEl: null
, bindDraggables: function() {
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', localNameSpace.handleDragStart, false);
col.addEventListener('dragenter', localNameSpace.handleDragEnter, false);
col.addEventListener('dragover', localNameSpace.handleDragOver, false);
col.addEventListener('dragleave', localNameSpace.handleDragLeave, false);
col.addEventListener('drop', localNameSpace.handleDrop, false);
col.addEventListener('dragend', localNameSpace.handleDragEnd, false);
});
}
, createDraggables: function() {
var colDiv = document.getElementById('columns');
var divC = document.createElement('div');
var spanC = document.createElement('span');
divC.className = 'column';
divC.draggable = 'true';
spanC.innerHTML = 'A';
divC.appendChild(spanC);
colDiv.appendChild(divC);
}
, handleDrop: function(e) {
if(e.stopPropagation){
e.stopPropagation();
}
if(dragSrcEl != this){
localNameSpace.dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
, handleDragEnd: function(e) {
var cols = document.querySelectorAll('#columns .column');
this.style.opacity = 1;
[].forEach.call(cols, function(col){
col.classList.remove('over');
});
}
, handleDragEnter: function(e) {
this.classList.add('over');
}
, handleDragLeave: function(e) {
this.classList.remove('over');
}
, handleDragOver: function(e) {
if(e.preventDefault){
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
, handleDragStart: function(e) {
this.style.opacity = 0.4;
localNameSpace.dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
, init: function() {
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
localNameSpace.createDraggables();
localNameSpace.bindDraggables();
}
}, 10);
}
};
localNameSpace.init();

child div click event triggers parent click event

How do i prevent the parent click event from firing if the child div is clicked?
http://jsfiddle.net/2GEKu/
var p = document.getElementById('parent');
var c = document.getElementById('child');
p.onclick = function () {
alert('parent click');
}
c.onclick = function () {
alert('child click');
}
Invoke the .stopPropagation() method of the event object in the child's handler.
var p = document.getElementById('parent');
var c = document.getElementById('child');
p.onclick = function () {
alert('parent click');
}
c.onclick = function (event) {
event.stopPropagation();
alert('child click');
}
To make it compatible with IE8 and lower, do this:
c.onclick = function (event) {
if (event)
event.stopPropagation();
else
window.event.cancelBubble = true;
alert('child click');
}

Jquery hover with .on()

Im trying to use hover with .on(), but all bits of code and answers i find do not work.
I need to use .on because its Ajax content.
A few ive tried:
$(document).on('mouseenter', '[rel=popup]', function() {
mouseMove = true;
width = 415;
$('#tool-tip').show();
var type = $(this).attr('data-type'),
id = $(this).attr('data-skillid');
console.log("TT-open");
ttAjax(type, id);
}).on('mouseleave', '[rel=popup]', function() {
mouseMove = false;
console.log("TT-close");
$('#tool-tip').hide();
$('#tt-cont').html("");
$('#tt-ajax').show();
});
$('[rel=popup]').on('hover',function(e) {
if(e.type == "mouseenter") {
mouseMove = true;
width = 415;
$('#tool-tip').show();
var type = $(this).attr('data-type'),
id = $(this).attr('data-skillid');
console.log("TT-open");
ttAjax(type, id);
}
else if (e.type == "mouseleave") {
mouseMove = false;
console.log("TT-close");
$('#tool-tip').hide();
$('#tt-cont').html("");
$('#tt-ajax').show();
}
});
$('[rel=popup]').on("hover", function(e) {
if (e.type === "mouseenter") { console.log("enter"); }
else if (e.type === "mouseleave") { console.log("leave"); }
});
$(document).on({
mouseenter: function () {
console.log("on");
},
mouseleave: function () {
console.log("off");
}
}, "[rel=popup]"); //pass the element as an argument to .on
The original non .on:
$('[rel=popup]').hover(function(){
mouseMove = true;
width = 415;
$('#tool-tip').show();
var type = $(this).attr('data-type'),
id = $(this).attr('data-skillid');
console.log("TT-open");
ttAjax(type, id);
},function () {
mouseMove = false;
console.log("TT-close");
$('#tool-tip').hide();
$('#tt-cont').html("");
$('#tt-ajax').show();
})
All the .on return "TypeError: $(...).on is not a function". I am using version 1.9.1.
The events you're looking for may be
$("#id").mouseover(function(){});
or
$("#id").mouseout(function(){});
There was an answer with:
$(document).on({
mouseenter: function () {
console.log("on");
},
mouseleave: function () {
console.log("off");
}
},"[rel=popup]");
This worked, and for some reason I have JQ 1.4 in a 1.9.1 named file that was causing the problem.

Categories