I am using the HTML5 Drag and Drop API. I have set a drag image using a visible node, but it is ghosted/partially transparent.
Setting the the drag image:
evt.dataTransfer.setDragImage(someVisibleElement, -12, -8);
Every example I see is translucent:
http://www.kryogenix.org/code/browser/custom-drag-image.html
It looks like you cannot set opacity on this element, is this true?
No option is in MDN docs, but I was hoping someone could confirm. Seems strange to lock us in to 50% opacity if we can set an image.
I didnt found easy way
but you can do it hard :-D.
create/clone element you want to see dragging, append to dom, set position fixed and between dragstart and dragend update his position according your mouse position.
You cannot set opacity on this element. Would love to be able to point to the part of the spec or bug report that notes this is the case.
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
I am building a sortable list that uses the HTML5 drag and drop. It works well, but I have a frustrating problem when it comes to the ghost image. The ghost image always wants to fly back to the location that it came from. The result is that if a list item change positions, the ghost image will fly back to the wrong list item.
Ideally, the ghost image should just not show at all after the onDragEnd event. I've tried setting the image to an empty image on dragEnd with
handleDragEnd(e) {
e.dataTransfer.setDragImage(new Image(0, 0), 0, 0);
...
but I think that you can only use setDragImage in onDragStart.
Is there a way to hide the ghost image onDragEnd, or at the very least get it to fly back to the correct location?
The revert effect is the default behavior on Safari, but you can control this default behavior in the HTML that you control. You only need to add a dragover event on the zone on which you want to prevent this revert effect and call e.preventDefault(). Only limitation: you won't be able to control when user drags the element out of the browser or the frame that you control.
But something like this gets rid of the problem you're describing:
var draggedId;
var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAO0lEQVR42u3OMQ0AMAgAsGFiCvCvDQeggoSjVdD4lf0OC0FBQUFBQUFBQUFBQUFBQUFBQUFBQUFBwR0DX1VWkeseHpAAAAAASUVORK5CYII=";
document.getElementById('a').ondragstart = dragstart_handler;
document.getElementById('b').ondragstart = dragstart_handler;
document.ondragover = (e) => {
if (draggedId === "a") {
e.preventDefault();
}
}
function dragstart_handler(e) {
draggedId = e.target.id;
e.dataTransfer.setDragImage(img, 0, 0)
}
div {
cursor: pointer;
}
div:hover {
color: blue;
}
<div id=a draggable=true>
This element won't revert on dragend.
</div>
<div id=b draggable=true>
This one will revert.
</div>
I'm only using JS and HTML, and I would like to know if there is a method to get the coordinates of the point I'm actually clicking on an image.
I would like to have the same coordinates that you give when you use the <area shape="circle" coords="...,...,..." for example.
I already tried to use pageX, pageY, offsetX, ... but nothing of this works my way ... :/
The context is that I have an image that is bigger than the div that contain it. I want to be able to drag the image. And I have another little image that is the same as the big image (resized to be a miniature) and a red rectangle on it so when I move on the big image, I can know where I am if i check the rectangle on the miniature!
Thanks in advance for your responses!
Probably not through html but I know through JS/jQuery
$(document).on("mouseover", function(event) {
console.log("x coord: " + event.clientX);
console.log("y coord: " + event.clientY);
});
Yes there is.
Take a look at this thread. It already has an answer for you!
jQuery get mouse position within an element
Answer by 'Jball'.
One way is to use the jQuery offset method to translate the event.pageX and event.pageY coordinates from the event into a mouse position relative to the parent. Here's an example for future reference:
$("#something").click(function(e){
var parentOffset = $(this).parent().offset();
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
});
At first I change "left" css property, then I add transition property which looks for "left" changes and it executes animation. Could someone explain me why does it happen? I thought that it should change position of element and then looks for transition, but it doesn't.
var button = document.getElementById('slide');
button.onclick = function() {
var view = document.getElementById('view');
view.style.left = '-100px';
// Why does transition happen? O_o
view.style.transition = 'left 500ms ease-out';
}
http://jsfiddle.net/martyn0FF/20kvbvua/
Redraw and animation operations are deferred until the currently executing thread of JS finishes so that the browser can examine everything that has changed and act on those changes just once rather than trying to keep up with every change as it is made.
As such, it seems your changes to style.transition and style.left are connected and seen at the same time.
If you want to disconnect them, you can force a relayout by requesting one of several interesting properties (such as .offsetHeight) that trigger a relayout after you've set the .left property, but before you've set the .style.transition property like this:
var button = document.getElementById('slide');
button.onclick = function() {
var view = document.getElementById('view');
view.style.left = '-100px';
// trigger layout by requestion offsetHeight
var x = view.offsetHeight;
view.style.transition = 'left 500ms ease-out';
}
Notice in this jsFiddle with this code that the new left value takes place immediately and it is not animated.
I have been working on this. Obviously, it uses key binding to animate and shoot bullets. Unfortunately, if you move up or down and a bullet is on its way to the target, and you move up or down, the bullet moves with you. Same situation with the target. So I looked at css positioning, and I think that the problem could be that somehow the created bullet is appended to the player. I have tried to change the positioning on both of them, and changing the bullet creater code to append to body. To no avail.
Here is my link:http://jsfiddle.net/5khhmepv/9/
And here is the creator code that I think is the problem:
var shoot = function () {
if (canshoot === true) {
canshoot = false;
bullety = 0;
var div = $('<div class=' + 'bullet' + ' style=' + 'marginTop:-25;' + '>yt</div>');
div.appendTo('html');
div.animate({
marginLeft: 500 + 'px'
}, 1500);
canshoot = false;
setTimeout(function () {
$(".bullet").hide();
canshoot = true;
}, 1500);
}
};
By setting the position of your #player element to static, you make the size of the document dependent on how far down the document your player is. Moving your player up and down then causes the bullet to shift based on its relationship to the document height. What you probably want to do is have a fixed-size canvas, and absolutely positioned #player and .bullet. Don't forget to initialize the bullet's top to be aligned with the player's current scrollOffset.
I made some quick adjustments to your fiddle and i think it's working as intended.
http://jsfiddle.net/5khhmepv/28/
Basically you shouldn't use static as position value as Palpatim explained.
We are trying to increase the clickable area of a marker on a google map. The reason we want to do that clicking on the icon sometimes misses the anchor point. We rather not reduce the size of the icon size
We are assuming that one of the properties of the GIcon objects is what we need to change and tried changing the iconAnchor and and infoWindowAnchor property of the GIcon but that doesnt seem to work.
anyone point us in the right direction?
I know its been a while but I had the same issue, lets say your icon is 51 pixels wide and 32 pixels tall:
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.imageMap = [0,0 , 51,0, 51,32 , 0,32];
Basically you're just inputting x,y co-ordinates
If you have different icons, it's a good idea to create the imageMap dynamically:
function getImgSize(imgSrc) {
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
return [height,width];
}
var icon = new GIcon(G_DEFAULT_ICON,iconUrl);
var iconSize = getImgSize(iconUrl);
icon.iconSize = new GSize(iconSize[1], iconSize[0]); // set icon size
icon.imageMap = [0,0, icon.iconSize.width,0, icon.iconSize.width,icon.iconSize.height,0,icon.iconSize.height]; // set click area
icon.shadowSize = new GSize(0, 0); // disable shadow
Reference: http://code.google.com/apis/maps/documentation/reference.html#GIcon
iconAnchor and infoWindowAnchor set where in the image the actual point on the map and the info window are respectively.
If you want a bigger clickable area, you may be able to do something with the imageMap property for non-IE (I've never tried). However, I think your best bet would be to define a custom GIcon that uses a larger image(padded with transparent space. Unfortunately, that's quite a bit of a hack -- maybe someone else knows of a better way.
In the end, we reduced the size of the image. We had not noticed the recommended graphic size was 19x19