image fading out when size is big using HTML drag - javascript

We are using drag & drop feature of HTML.
As you can see div width is 410px and if start dragging this div, its ghost image of it fades out completely. I have big/large images to display while dragging them and as they are big in size they start to fade out completely. Is there any problem ?
If I change div width to 210px then the ghost image looks fine. Then what's the problem with 410px is there any limit to it? If yes, how can I increase it ?
var els = document.getElementsByTagName('div');
for (var i = 0, l = els.length; i < l; i++) {
els[i].addEventListener('dragstart', function (e) {
e.dataTransfer.setData('text/plain', e.target.innerText);
});
}
div {
display: inline-block;
line-height: 300px;
text-align: center;
background: orange;
margin: 20px;
}
<div draggable="true" style="width:410px">Item 2</div>

hide original image using event.dataTransfer.setDragImage(new Image(), 0, 0);
on dragstart. onDrag get the ghost image, update position using event.pageX, evenet.pageY
onDrag(event){
event.preventDefault();
const parentElement = <HTMLDivElement>(document.querySelector('.darggable-ghost-wrapper'));
parentElement.style.position = "fixed";
parentElement.style.left = event.pageX + "px";
parentElement.style.top = event.pageY + 5 + "px";
parentElement.style.opacity = ArhitectUtlityConstants.GHOSTPREVIEW.ghostOpacity;
parentElement.style.border = "1px solid green !important";
}

Related

Using two mouse events after each other

I am creating a canvas alike without using canvas tag , by creating new div each time mouse is down, i can't figure out how to run a second event.
Like mousedown then mousemove event where the seconed event occur only after the first one is true?
also if you can help with the offset coordinates
var paintbox = document.getElementById("canvas");
var start = function() {
paintbox.addEventListener("mousedown", drawOnCanvas);
};
var newColor = document.getElementById("colorPick");
var drawOnCanvas = function() {
var newClick = document.createElement("div");
newClick.setAttribute("id", "smallDiv");
newClick.style.backgroundColor = newColor.value;
newClick.style.width = "10px";
newClick.style.height = "10px";
newClick.style.position = "absolute";
paintbox.appendChild(newClick);
}
Set the handler on the mousemove event instead of mousedown and in the handler check whether the mouse button is down.
It would be better to move the 10px/position style settings in a CSS class. Also, don't generate elements with the same id attribute value: that generates invalid HTML. Use a class instead.
For the positioning you can use the pageX and pageY properties of the event object.
Finally, as the events will be triggered on the small divs when you make small moves, an extra check might be necessary to verify the mouse is still in the paint box.
var paintbox = document.getElementById("canvas");
var start = function() {
paintbox.addEventListener("mousemove", drawOnCanvas);
};
var newColor = document.getElementById("colorPick");
var drawOnCanvas = function(e) {
if ((e.buttons & 1) === 0) return; // Mouse button is not down
// Extra check to see we are well within the box boundaries:
var box = paintbox.getBoundingClientRect();
if (e.clientX - 5 < box.left || e.clientX + 5 > box.right
|| e.clientY - 5 < box.top || e.clientY + 5 > box.bottom) return;
var newClick = document.createElement("div");
newClick.className = "smallDiv"; // Don't create duplicate ID; put CSS in class
newClick.style.backgroundColor = newColor.value;
paintbox.appendChild(newClick);
newClick.style.left = (e.pageX-5) + "px";
newClick.style.top = (e.pageY-5) + "px";
}
start();
#canvas {
height: 150px;
width: 300px;
border: 1px solid;
display: inline-block;
margin: 10px;
}
.smallDiv {
width: 10px;
height: 10px;
position: absolute;
}
Color: <input id="colorPick" type="color"><br>
<div id="canvas"></div>

Leap.JS: How can I select items on a webpage using the LeapMotion?

I am looking to select items in a web page using the LeapMotion and I am struggling with programming this interaction.
Using this code as a base (but updating the link so it connects to the current SDK) I can get my cursor to move around the window based on where my hand is in space. However, I do not know how to make the equivalent of the event listener "click" using the LeapMotion. I am using Leap.js and have built a crude GUI using svg.js.
How do I program an event listener that selects using the LeapMotion in Javascript?
I have working code with Leap motion. I did quize software. Here cursor is a div element which styled as:
#cursor {
width: 60px;
height: 60px;
position: fixed;
margin-left: 20px;
margin-top: 20px;
z-index: 99999;
opacity: 0.9;
background: black;
border-radius: 100%;
background: -webkit-radial-gradient(100px 100px, circle, #f00, #ff6a00);
background: -moz-radial-gradient(100px 100px, circle, #f00, #ff6a00);
background: radial-gradient(100px 100px, circle, #f00, #ff6a00);
}
and Java script at bottom. What I did, I get HTML element by position and triggering click event on it by tap gestures.
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
// Setting cursor and output position
window.cursor = $('#cursor');
var controller= Leap.loop(function(frame) {
if (frame.pointables.length > 0) {
try
{
var position = frame.pointables[0].stabilizedTipPosition;
var normalized = frame.interactionBox.normalizePoint(position);
var cx = w * normalized[0];
var cy = h * (1 - normalized[1]);
$('#cursor').css('left', cx);
$('#cursor').css('top', cy);
}catch(e){
console.error(e);
}
}
});
controller.use('screenPosition', {
scale: 1
});
controller.on('gesture', onGesture);
function onGesture(gesture,frame)
{
try
{
// If gesture type is keyTap
switch(gesture.type)
{
case 'keyTap':
case 'screenTap':
var position = frame.pointables[0].stabilizedTipPosition;
var normalized = frame.interactionBox.normalizePoint(position);
//Hiding cursor for getting background element
cursor.hide();
// Trying find element by position
var cx = w * normalized[0];
var cy = h * (1 - normalized[1]);
var el = document.elementFromPoint(cx, cy);
cursor.show();
console.log(el);
if (el) {
$(el).trigger("click");
}
break;
}
}
catch (e) {
console.info(e);
}
}

Zoom in picture on hover using javascript

I'm new with JS.
https://codepen.io/Maartinshh/pen/VbGOvm
Here's my code:
html
<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAA20AAAAJDZhZjAwOTE3LTExMDQtNDE5OC05NDdhLWUxYTU0ODJiZTdkYQ.png">
<div id="overlay" onmousemove="zoomIn(event)"></div>
css
#overlay {
border: 1px solid black;
width: 450px;
height: 450px;
position: absolute;
display: inline-block;
background-image: url('https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAA20AAAAJDZhZjAwOTE3LTExMDQtNDE5OC05NDdhLWUxYTU0ODJiZTdkYQ.png');
background-repeat: no-repeat;
}
js
function zoomIn(event) {
var element = document.getElementById("overlay");
element.style.display = "inline-block";
var img = document.getElementById("imgZoom");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition = (-posX * 1) + "px " + (-posY * 1) + "px";
}
function zoomOut() {
var element = document.getElementById("overlay");
element.style.display = "none";
}
Problem that occurs: If you see, then when I mouseover picture on left side, the right side (zoomed) picture, doesn't really follow correctly with zoom. What am I doing wrong?
Also, how can I change zoom level (zoom closer)?
Thanks in advance.
You need to do some calculations to add extra offset to place img at center of the div
var offY = (element.clientHeight -img.clientHeight)/2;
var offX = (element.clientWidth -img.clientWidth)/2;
edited codepen here

HTML5 Drag and Drop - How to remove the default ghost image on IE

I have implemented the drag and drop API of HTML5 in my app, and I need to disable the default ghost image when the user drag an item.
The items aren't images but row from a table like :
<table>
<tr draggable droppable ><td></td></tr>
<tr draggable droppable ><td></td></tr>
<tr draggable droppable ><td></td></tr>
</table>
Each row can be draggable in to another one (see it as a filesystem with folder and files).
In my dragstart I've done something like this to hide the default ghost image :
e.originalEvent.dataTransfer.setDragImage(disableImg[0], 0, 0);
Where diableImg is a dom element with 0 width and 0 height opacity 0 etc...
The issue here is that this is not working for IE since it doesn't support the setDragImage.
Is there another way to disable this ghost image of my row on drag ?
I just need to have it working from IE 11 -> Edge.
Thanks.
Example of set custom ghost image in IE.
var ghostImg = document.getElementById("ghostImg");
document.getElementById('dragme').addEventListener('dragstart', function(e) {
var target = e.srcElement || e.target;
var cloneNode = target.cloneNode(true);
target.parentNode.insertBefore(cloneNode, target);
target.style.display = "none";
window.setTimeout(function() {
target.parentNode.removeChild(cloneNode);
target.style.display = "block";
}, 0);
ghostImg.style.zIndex = '99';
ghostImg.style.visibility = 'visible'
ghostImg.style.top = e.clientY + 'px';
ghostImg.style.left = e.clientX + 'px';
})
document.getElementById('dragme').addEventListener('drag', function(e) {
ghostImg.style.zIndex = '99';
ghostImg.style.top = e.clientY + 'px';
ghostImg.style.left = e.clientX + 'px';
});
document.getElementById('dragme').addEventListener('dragend', function(e) {
ghostImg.removeAttribute('style');
});
#dragme {
width: 100px;
height: 100px;
background: #78ebff;
border: 1px solid #56bdff;
text-align: center;
line-height: 100px;
border-radius: 10px;
}
#ghostImg {
position: fixed;
left: 0;
top: 0;
z-index: -1;
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="dragme" draggable="true">
Drag me
</div>
<img id="ghostImg" src="data:image/png;base64,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"/>
</body>
</html>
On dragStart event, implement:
function dragStart(e)
{
var target = e.srcElement || e.target;
if (isIEBrowser()) // check its IE browser
{
var cloneNode = target.cloneNode(true);
target.parentNode.insertBefore(cloneNode, target);
target.style.visibility = "collapse";
window.setTimeout(() => {
target.parentNode.removeChild(cloneNode);
target.style.visibility = "visible";
}, 0);
}
}
I was having this problem as well. I simply set the display to none before the drag.
if (event.dataTransfer.setDragImage)
{
let dragImage = document.createElement("div");
dragImage.style.visibility = "hidden";
event.dataTransfer.setDragImage(dragImage, 0, 0);
}
else
{
//Well if we cannot remove the ghost image then we need to make the initial image invisible when a ghost image would be captured
//then make the item visible again.
var initialDisplay = event.srcElement.style.display;
event.srcElement.style.display = "none";
window.setTimeout(() =>
{
event.srcElement.style.display = initialDisplay;
});
}
Seems after 1 frame (notice the settimeout doesn't specify a delay time) the display went back to normal, but when the ghost image was captured it was invisible.

Simple range /value Slider in JavaScript

I am trying to do a simple Range/Value Slider by using javascript or jQuery, A button in a div.This slider should be done without bootstrapor any other pluginor with inbuild functions
My question is how to move the slider button within the div element and what mouse events are needed to do this?
Note:This is not a slideshow slider or image slider
Take a look at this simple slider implementation. Feel free to use and modify the way you prefer:
document.addEventListener('DOMContentLoaded', function() {
var sliders = document.querySelectorAll('.my-slider');
[].forEach.call(sliders, function(el, i) {
var btn = el.firstElementChild,
span = el.nextElementSibling.querySelector('span'),
isMoving = false;
var move = function(e) {
if (isMoving) {
var min = 0,
max = el.offsetWidth - btn.offsetWidth,
mousePos = (e.pageX - el.offsetLeft - (btn.offsetWidth / 2)),
position = (mousePos > max ? max : mousePos < min ? min : mousePos),
value = Math.floor((position / max) * 100);
btn.style.marginLeft = position + 'px';
btn.value = value;
span.textContent = value;
}
};
el.addEventListener('mousedown', function(e) {
isMoving = true;
move(e);
});
document.addEventListener('mouseup', function(e) {
isMoving = false;
});
document.addEventListener('mousemove', function(e) {
move(e);
});
});
});
.my-slider {
width: 250px;
border: 1px solid #999;
border-radius: 3px;
background-color: #ccc;
height: 10px;
line-height: 10px;
}
.my-slider__button {
border: 1px solid #333;
border-radius: 3px;
margin-top: -4px;
width: 18px;
height: 18px;
background-color: #eee;
display: block;
}
div {
margin-top: 6px;
}
<div class="my-slider">
<button class="my-slider__button"></button>
</div>
<div>
<strong>Current value: </strong><span></span>
</div>
<div class="my-slider">
<button class="my-slider__button"></button>
</div>
<div>
<strong>Current value: </strong><span></span>
</div>
<div class="my-slider">
<button class="my-slider__button"></button>
</div>
<div>
<strong>Current value: </strong><span></span>
</div>
You use drag and drop events, with a property setting that is restricted to the div it is within. Check out this link Drag Drop Reference Guide, and you will see everything you need. When you use draggable and dropable, you can restrict the movement to horizontal, and also set the element that it is bound to. This will allow you to only move left to right, and restrict vertical movement, and keep in the boundaries of the div. The same features bootstrap uses to get it done.
Here is a basic example showing some of the stuff mentioned:
$('. draggable').draggable({
axis: 'y',
handle: '.top'
drag: function( event, ui ) {
var distance = ui.originalPosition.top - ui.position.top;
// if dragged towards top
if (distance > 0) {
//then set it to its initial state
$('.draggable').css({top: ui.originalPosition.top + 'px'});
}
}
});
try this :
$('img').mouseenter(function(){ //or you can use hover()
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: "right" };
// Set the duration (default: 400 milliseconds)
var duration = 1000;
$(this).toggle(effect, options, duration);
});

Categories