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
1
vote
1 answer

Drag and drop not working on scaling

My Application has the Drag and drop. But on scaling the window drag and drop not working properly. Here is the code.
CSS…
1
vote
0 answers

Drag and Drop with HTML5, MVC and Entity Framework

I'm using MVC 5 and Entity Framework 6 to create a web application where users can file a report and assign a category to it. A report can have multiple categories and a category can have multiple reports, so a many to many relation. public class…
Houkes
  • 54
  • 8
1
vote
1 answer

JavaScript triggered by html5sortable's sortupdate is being run twice

On an aspx page I have a sortable list like this that is made using this plugin.
  • Shot Name - 1
  • Shot Name -…
Ectropy
  • 1,533
  • 4
  • 20
  • 37
1
vote
1 answer

Canvas Drawing on Draggable Images

On html page which has some draggable images we have to draw shapes or lines using mouse pointer, drawing images and shapes is done, but not on draggable images .Also, if user moves the image the shape drawn earlier should remain their. Meanwhile, i…
NewBee
  • 195
  • 8
1
vote
2 answers

Nested Ember.View dragEnter dragLeave called in wrong order?

I am creating a calendar using the html5 drag and drop api. I am using dragEnter and dragLeave to style the receiving element and determine droppablity. The receiving droppable element has children and dragLeave is being called when dragging over a…
Aaron Renoir
  • 4,283
  • 1
  • 39
  • 61
1
vote
3 answers

HTML5 drag event using a $(function() { ... } library

I have been playing around with HTML5 and Javascript for the first time and I am stuck. My question in short is how do I call a method (in html) inside a JS file which starts with $(function() { ... } Basically I used azure which gives you a code…
Keithin8a
  • 961
  • 7
  • 32
0
votes
1 answer

Adding drag drop functionality in Vue Splitpanes

I am trying to add Drag-drop functionality in Vue Splitpane. I was trying several drag-drop packages i.e. vue-smooth-dnd, Vue.Draggable, etc. But, those dnd packages were conflicting with the splitpane package as it strictly maintains the structure…
user1896653
  • 3,247
  • 14
  • 49
  • 93
0
votes
1 answer

Dragging a CSS scaled element removes scaling (HTML5 dragging, not jquery)

I'm creating a palette where objects can be dragged and dropped. To support smaller screen sizes and avoid a ton of calculations, I'm trying to implement css scaling on the palette itself, or on the objects with them. I'm using HTML draggable to…
Jeremy L.
  • 853
  • 8
  • 15
0
votes
1 answer

How to show droppable area using Drag and Drop HTML API

I'm implementing a functionality where the user can sort the list and re-order the elements, on dragover I want to show the droppable area below the dragover element. Note: I want to achieve this using native javascript
vivek mengu
  • 87
  • 1
  • 7
0
votes
1 answer

Angularjs Directive to make HTML element draggable and HTML fields within it selectable or modifiable

I tried many things but none of them are working. Hence, posting the same. Here is the background: I have this HTML element which will create a rectangular box based on ng-repeat dynamically. Within each of this Rectangular box there are various…
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98
0
votes
1 answer

Dropping over child triggers the "drop" event listener of parent . I want to override that event listener by a Child specific "drop"

This is my code. I have defined two different drop events with different selectors but the parent one overrides the child drop. //this is parent for(let i=0 ; i < $(".Droppable").length; ++i) { …
0
votes
1 answer

Prevent drag & drop (it's dropping anywhere)

I'm using this AngularJS Drag & Drop library and the documentation is confusing and it's quite out of date, but the effect is that it seems like even if there's nowhere to drop it it always drops.
MalcolmOcean
  • 2,807
  • 2
  • 29
  • 38
0
votes
1 answer

JavaScript drag n drop XY location when dropped is off due to point in drag element

I am trying to create a drag and drop application when I can drop a marker on an image. While this is an Angular app I am using plain old JS API for the drag and drop do to issues with CDK. I am able to move a 20x20 div around the image and drop…
0
votes
1 answer

jQuery Draggable - Create draggable and start dragging on html5 native Drag And Drop api event

Okay, basically what I want to try to achieve, is when a dragover event fires from HTML5 Drag And Drop API, I wish to create a jQuery draggable object, and start following the mouse around, while the dragend event fires from the HTML5 Drag And Drop…
Adam Baranyai
  • 3,635
  • 3
  • 29
  • 68
0
votes
1 answer

HTML5 Drag and drop. Detecting where element was grabbed

I am working with HTML 5 Drag and Drop API, and implementing sortable list and auto scroll. For some of features, I would like to able to detect which part of element was grabbed Here is the illustration Any help would be appreciated, thanks
Tauka Kunzhol
  • 98
  • 2
  • 9