Stack Overflow
Stack Overflow

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
2
votes
3 answers

Both "clickable" and "draggable" area

I have a list of element inside an ng-repeat for which elements are clickable and draggable : if I click I display, and if I drag ... I drag the element. When dragging I am displaying a circle with the number of element to drag. My problem is that…
benek
  • 2,088
  • 2
  • 26
  • 38
1
vote
1 answer

Changing dropEffect cursor to 'move' on drag

I'd like to change my cursor to 'move' when using HTML 5 browser drag and drop. However, when I move the draggable item, this cursor remains unchanged (default). According to MDN documentation and other various Stackoverflow posts with this same…
FakeEmpire
  • 668
  • 1
  • 14
  • 35
1
vote
1 answer

Drag and drop dataTransfer.getData is always getting empty string

I am trying do simple drag and drop functionality. I want set some data in on drag via dataTransfer.setData() and get it on drop via dataTransfer.getData() . I am always getting empty string (""). Please check the link for reproducing…
Siluveru Kiran Kumar
  • 699
  • 1
  • 10
  • 16
1
vote
0 answers

Click and drag to select and move points on a SVG

With a SVG with lines and points like this: svg line { stroke: black; stroke-width: 2px; }
Basj
  • 41,386
  • 99
  • 383
  • 673
1
vote
0 answers

HTML drag and drop API inconsistent across OS/browser

I'm implementing drag and drop functionality inside a vue.js application, using the native HTML5 drag and drop API (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) There seems to be inconsistency with the behaviour across…
palmerh
  • 33
  • 3
1
vote
1 answer

After starting the drag of a DOM element with draggable attribute , Could we stop dragging and exit from drag and drop?

I have to stop the drag async after the drag is started. Can I add something in drag event to cancel the drag ? document.querySelector('#drag-elem').addEventListener('drag', function(e){ // Stop the drag …
vishnu sandhireddy
  • 1,148
  • 1
  • 7
  • 12
1
vote
0 answers

HTML DragAndDrop issues on all browsers but FireFox

I'm trying to implement html Drag and Drop, which i have done in the past on the same project and its working. But when i create it for a new section im doing, my current method only works on firefox. All other browsers instantly call onDragEnd…
Kennyist
  • 58
  • 5
1
vote
0 answers

Drag drop issue on Mobile Devices

Now, I have developed web application using KonvaJS for drag-drop which can be used by mobile devices as well by following the example in W3School. So far, it works in both desktop mode and mobile device mode using Mozilla Firefox. However, it does…
Wisarut Bholsithi
  • 141
  • 1
  • 7
1
vote
1 answer

HTML5 DnD - Why is ghost image only working as expected AFTER dragging & dropping an element?

I'm trying to get a p element with a nested img to show as the ghost image when dragging. I'm not sure how to debug this but I have noticed that once the images are cached or have been dragged and dropped somewhere on the page, it works as expected.…
compuphys
  • 1,289
  • 12
  • 28
1
vote
1 answer

nested html5 draggable items

I have a questions about html5 draggable items. I've been looking at this example: https://codepen.io/retrofuturistic/pen/tlbHE If I customize it and make the parents draggable
1
vote
1 answer

Drag and Drop HTML (placeholder)

Can anyone help me with drag and drop placeholder. I have 2 row's (left-right), each of them have 5 items. I want to show the placeholder (border-style: dotted;) with neat animation. Soo.. before i drop the item i want to show the border. …
egzonmustafa
  • 115
  • 5
  • 13
1
vote
1 answer

Javascript Advanced Draggable Trouble

I'm making a playlist for demonstration purposes. I have set up a unordered list nested with list items. These items have been made draggable by the "draggable=true" handler, which works great. Here's where I'm stuck; Once the item has been clicked,…
Nathan
  • 87
  • 8
1
vote
0 answers

mouseup-event doesn't trigger during dragging

I drag one element over another and I want the other element to change when I let go of the drag. But the 'mouseup' event doesn't work when the mouse on the same time lets go of a dragged object. What can I do? my html-list:
1
vote
2 answers

How can I make a jquery created div be draggable?

Hi i was wondering if there was a possible solution of creating a draggable div which is created in javascript for example: var output = " "; output+= '
'; output+= '

' + data.properties[i].id+…

Steven
  • 79
  • 2
  • 11
1
vote
1 answer

Chrome native drag-and-drop of relative container is not rendering ghost right

When you want
with relative position to be draggable, and this
has some absolutely positioned content, ghost image is not rendered right. Here is fiddle: https://jsfiddle.net/0s3fxqnv/ Does anybody know how to fix this?
Jakub Truneček
  • 8,800
  • 3
  • 20
  • 35
1 2
3
4 5 6