I'm having an issue, with the Ghost Image / Icon that appears on Drag, for Safari specifically.
In the sample project, I am adding Base64Encoded SVG Images to the DOM. Each time I attempt to drag one of the Images, the Ghost Image gets larger. This behavior doesn't seem to be happening on Chrome.
Ultimately, the drag and drop is meant to allow Users to insert the selected image onto a canvas (using a 3rd Party library). However, the issue occurs even without it.
Not entirely sure what is going on, but any help is most appreciated. I tried using the setDragImage() method in the Drag and Drop API docs, CSS to change the Ghost Image / Icon as outlined here (link: https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html) but no luck...
Thanks!
Link to Project:
https://replit.com/#Zeroays/Drag-and-Drop-SIMPLE-TEST#script.js
Related
I want to get the image that browser generates when we drag an element. Here is the simple example why I want to do this.
In the above image the two videos placed inside the black div like picture-in-picture. The black div is able to drag & drop. When I drag the black div the browser generates the draggable translucent image like in above picture.
In code implementation I am using dataTransfer setData & getData method to access dragged image. When I drop image and use dataTransfer.getData gives the dragged div ID and having only black background. I need the actual dragged image to store in state in the form of URL to use in application. How can I do this without using any external libraries?
I know the HTML2Canvas library generates screenshots like browser do. But is there any way to use/store browsers dragged image?
Thank you!
Edit: Here is the sample demo of what i want: https://codepen.io/AkshayPatil_/pen/oNoPNQE
I'm looking for a script that will allow a user to pick an image in an HTML page and drag it to a new location while allowing the other page's element to align around it.
While dragging the image should be completely visible (there are many scripts, like TinyMCE and CKeditor) which don't show the image while dragging and only show its new location and the elements around the dragged image after dropping it.
And just to be clear, the image is using the same z-index as the rest of the page (its inline).
I hope I was clear enough, let me know otherwise.
Something like jQuery Masonry? http://masonry.desandro.com/
My app uses up to 6 svg images layered to create an interactive image. I have found that I cannot mouseclick on any images below the first.
** Edit. Excess code and text removed.
You can make an element insensitive for mouse events by setting the pointer-events attribute to none (see Tinkerbin):
svg > *{opacity:.5}
In essence I cannot do what I want this way. Stacking embedded images results in only the top layer being clickable by the mouse.
An image map works, with some mucking about.
I created a clear image calling it clearOverlay and gave is a usemap value tying it to my image map.
My imagemap I created using a free online app http://www.image-maps.com which took my image allowed me to create my clickable zones and generated the html for me. After cleaning it up and swapping the href values for onclick functions I added the map to my code.
Next problem was getting it to overlay my existing images. I eventually used style="position:relative; top:-300px" forcing it to sit squarely on my image. I'm sure there must be a better way, but at this point that worked for me.
For anyone else doing this don't forget to either place the clearOverlay last in your image list or set the css z-index to higher than everything else to make sure it is sitting on top.
So I now have a stacked svg image, where I can manipulate each svg according to where the user clicks. Its only taken me 5 days! I'm kinda over this coding by yourself lark.
** My image map above will not scale to different sized screens. The next time I try this, I will experiment using a transparent svg with fill zones where I wish to click.
I'm working on a web app that's available for testing on:
"http://83.150.87.220/dropbox/HelsinkiViSeZip/Jatkasaari"
It is used (mainly) to zoom in on an image and pan that same image.
Once the document loads and the central image becomes visible, you can mousedown + drag to either zoom in/out on that image or pan it.
When pressing the mouse button down, you'll notice that the image turns blurry and that an indicator (png image) appears just under the cursor. That indicator shows you how to move the cursor in order to select an action (zoom/pan).
Everything works just fine in Chrome, but in FF, once you mousedown for the second time on the image and start dragging the cursor, it seems that the indicator (the png image I mentioned earlier) drags along and messes everything up. This seems to be pretty much the default behavior for clicking-dragging images in any browser. But it's very weird, since on the first mousedown+cursor drag combination, everything works just fine. And not to mention that I made sure to prevent the default action for images:
$(document).on('mousedown dragstart', 'img, a.icon', function(event) {
event.preventDefault();
});
I'm all dried up in terms of ideas on how to find the problem, so I'm going out of my mind...Can anyone help?
Thanks in advance!
You could try setting it as a background image inside of a div container or something similar and just show/hide that instead of using an img element. That way you won't be able to actually "select" the image with the cursor but everything should still work if it's driven by javascript.
I was facing a similar problem and it seems that it need to also return false; to prevent the browser default behavior.
Here is the fiddle
What i want to do is have a user upload his image. When its complete it will display the image on the same page w/o refreshing. Here is the part i need to figure out, how do i have the user select a box in the image? so i can crop it when the user is done? (using ImageMagick).
If possible i would like a border for the user to stretch to edit the width and height. Then click within the rect to move around.
There's a ton of ways; including several pre-written plugins available through the web.
Are you using any frameworks?
Of the below, I've used Jcrop and Lasso.Crop and they've both worked out well. Haven't tried the others.
Here's a non-exhaustive listing:
Pure Javascript
http://www.dhtmlgoodies.com/index.html?whichScript=image-crop
jQuery
http://deepliquid.com/content/Jcrop.html
MooTools
http://www.nwhite.net/2009/02/25/lassocrop-preview/
Prototype
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/