Questions tagged [html5-draggable]

HTML5 draggable is one of the HTML5 feature which allows users to drag and drop any element inside the page.

HTML5 draggable is a markup attribute that powers the Drag and Drop API; When set on an element like so "draggable="true"", it becomes an object that can be dragged and dropped across the ui, by the user.

82 questions
3
votes
2 answers

setDragImage not removing ghost image on Chrome?

I have an element that is draggable. I want to remove the ghost image, since I will be creating that in another way. However, Google Chrome is not letting me stop the ghost image from appearing using setDragImage(). The blank image is being created…
Andrew Myers
  • 2,754
  • 5
  • 32
  • 40
3
votes
2 answers

Draggable attribute on touch devices

The draggable attribute seems to have no effect in browsers on touch devices.
Draggable Box
https://jsfiddle.net/41z5uz4t/ With a mouse, I can drag this element around. If I try to drag it around on my touch screen…
Brad
  • 159,648
  • 54
  • 349
  • 530
3
votes
1 answer

How do I find the position of the draggable element relative to the droppable area

I am using HTML5 native drag and drop. I am having problems finding the position of the draggable element relative to it's parent container. Summary of Task I have a "position: relative" div which I consider a 'droppable area'. Inside this div, I…
David Moores
  • 1,025
  • 2
  • 9
  • 23
3
votes
4 answers

Dragging a table column using HTML5 and AngularJS

http://jsfiddle.net/asutosh/82qum/
Asutosh
  • 1,775
  • 2
  • 15
  • 22
3
votes
1 answer

Firefox html5 drag and drop not working

I know there are a lot of similar questions on here, but, when putting them to action, I still resolve in the same problem. I have 2 angular directives (drag and drop) and one angular factory (dndAPI). This is all based off of fisshy's Angular Drag…
jbenowitz
  • 1,795
  • 6
  • 26
  • 39
3
votes
1 answer

draggable="true" isn't working inside Chrome Packaged App's

tl;dr an element that is draggable when viewed in Chrome isn't draggable when viewed in Chrome Packaged App's , why? EDIT: Tested on Chrome 29.0.1521.3 dev, still no luck when inside packaged app, but Chrome itself works…
Greg
  • 21,235
  • 17
  • 84
  • 107
2
votes
0 answers

HTML5 native Drag and Drop : Is it possible to change the preview while dragging an element?

I would like to change the preview while dragging an element. (see setDragImage) Like using another element if the user hit ctrl or shift for instance while dragging ? This is an example here. This example display an image when you start the drag…
Zied Hf
  • 491
  • 3
  • 10
  • 30
2
votes
1 answer

Drag and drop fill in blanks

This is my drag and drop throw fill in blanks code. But the thing is I also want if the user has inserted the wrong word at the wrong place after he/she getting point he/she wants to put a word in the right place. in this code in that type of word…
Brij
  • 51
  • 9
2
votes
0 answers

Html 5 Drop Event not firing Sometimes(like once in 10/15 times)

W3 schools drop event example I am using HTML5 drag drop api in my angular application.After Completing the implentation I realised that drop event fail to fire suddenly for one instance after some drops. I am dragging from a list of div's and…
khvr000
  • 31
  • 1
  • 6
2
votes
0 answers

No modifier keys registered in Firefox Mac during external drag and drop onto window

In Safari the following code shows what modifier keys are being pressed when dragging and dropping. But in Firefox the modifier keys are not being registered. Test code, https://jsfiddle.net/omofkgdv/21/. The Command key is being tested here but…
1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
2
votes
0 answers

is it possible to save multiple image or file in local storage from dropzone canvas by index?

I'm able to drag multiple image from one canvas and drop it to another canvas.But i'm unable to store images in Localstorage. So, i want to store images in localStorage from dropzone area according to image index. How can i overcome this problem? I…
2
votes
0 answers

Move bootbox modal across page while dragging

I am building an electron app in which I show a bootbox alert with a className of settingsModal.Now I was wondering.Is there any way to move this alert across the page by using native drag and drop api?(Don't want to use jQuery UI). Here is the code…
2
votes
2 answers

HTML5 Draggable List - multiple setData?

So, I have a list of bands that I want to organise into a running order, like so:
  • Metallica
  • Slayer
  • Kev
    • 143
    • 1
    • 1
    • 8
  • 2
    votes
    2 answers

    How to prevent element dragging in HTML 5 onto the address bar?

    I'm using Angular with the angular-drag-and-drop-lists directive. It uses HTML5 API to implement drag & drop. I've noticed that when dragging an element onto the browser address bar, the address is re-written with the element's data and the driver…
    Gabriel Kohen
    • 4,166
    • 4
    • 31
    • 46
    2
    votes
    1 answer

    HTML5 drag and drop, dropped div moves a bit from dropped position

    I have the following working code (also see this fiddle):
    {{hd}}