I'm trying to create a framework for HTML5-based adventure/point and click games, and I want to start with creating a way of dragging objects (from screen to hotspots or inventory, from inventory to hotspots, etc.), with svg representing both objects and hotspots (ie. completely transparent shapes there to detect hits). The idea is to drag the item, and allow it to drop only if the mouse is touching the hotspot.
I've run into some problems. Firstly, assigning a draggable attribute to <svg> or the testing circle didn't work. I tried putting it in a <div>, but while the drag event did register and fire, the ghost image didn't show like in the html5rocks demos. How can I fix the dragging?
Here's the fiddle.
Related
I was trying to implement Drag and Drop in one of my project using HTML's default API. I have completed the implementation but now I am facing the issue that an extra area is also picked in the DraggedImage other than the element. I have attached the image here for reference. The area highlighted by the black pen is the extra one (the image is the element that I want to drag).
I have tried to search a lot, but didn't find any relevant resource for getting rid of this.
One method that I can think of is cloning the dragged element on drag start and deleting the cloned after drop. But I think this will not be ideal as the dragged element can be more complex.
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
All the examples that I've seen with draggable elements have a specific destination where the draggable element can be dropped. Is it possible to drop the element anywhere on the screen without specifying the destinations?
I have a map (ThinkGeo) with some specific areas coming from the database. when the user clicks/touches those areas, I'm showing popups with description of those areas. The popup is nothing else than a div that I'm showing and hiding accordingly.
The user wants to be able to move around the popup div on the map. Is this even possible?
Certainly possible and pretty easy with jQuery UI:
$("#elementId").draggable();
And a shim for touch events:
http://touchpunch.furf.com/ which at 584 bytes, is pretty lightweight.
Various JavaScript libraries, such as jQuery UI, offer drag-and-drop interactions where you can constrain the movement of the dragged element to a single axis, or within a particular area.
Is this sort of thing possible using the native HTML5 drag and drop API?
It's totally different!
The jQuery UI drag and drop make element move (with top and left CSS properties) in the page.
The native HTML5 drag and drop API only allow you to move a "ghost" of the draggable element (of course, you can hide the original element while dragging the ghost).
The API come with a lot of event but no, you can't constrain mouse position so you can't constrain to a single axis (cause the ghost follow the mouse position, even if the mouse leave the page (but event may probably stop operate)).
For example on a drag and drop scenario.. I would love to be able to use the onmouseover of the thing we are dragging to, but unfortunately, the design calls for a ghost (copy of what is being dragged) which will surround the area of the mouse pointer. So the cursor is moused over the ghost the whole time.
Are you able to use jQuery? If so, I would look into jQuery UI to handle both your drag and drop events. Since you can make a ghost copy of what you are dragging without disrupting where you drop it.
Visual feedback for drag allowing you to show a fake ghost copy.
- http://jqueryui.com/demos/draggable/#visual-feedback
Visual feedback for when you hover over the droppable area.
- http://jqueryui.com/demos/droppable/#visual-feedback
For Firefox 3.6+, Chrome and Safari, you can use pointer-events: none;
jsfiddle.net Example
Original Post from pixelastic.com
When one HTML element is over another one (like when positioning an
element using position:absolute), you usually can't click through the
top element to access the bottom element.
That's used as a common
technique to prevent the right click on images by some sites (like
Flickr). They just add an empty transparent div over their images to
prevent the lambda user from right clicking and saving the image.
Sometimes, when integrating complex designs, you need those additional
layers, but you also want the user to be able to click through them,
as if they weren't there.
Just use the pointer-events:none css
property to allow click events to go through the element.
This is only
supported by Firefox 3.6+, Chrome and Safari for now.