Here is a simple demonstration of the problem – try moving the draggable element around the list of droppables and see the problem.Īfter lots of searching and trial and error, I came up with the solution of checking whether the mouse event was within the boundary of the parent element on every drag start, end or drop event. Not only does this cause unexpected behaviour when dealing with a fairly basic list of droppables, it causes even more confusion if you place multiple lists of droppables together as the drop event will then be fired on multiple elements (after bug fix #6009, anyway). In short, droppable elements which were hidden by a parent container boundaries with overflow: auto or overflow: hidden were still triggering the droppable functionality regardless of whether the drop target was visible or not. However I recently came across a frustrating issue with the scope of droppable drop targets which caused (in my opinion) unexpected behaviour. As such they’ve become a mainstay for millions of websites.
What I want to do is to put a draggable object and a droppable image in a panel and drag the draggable object on the image and get the position of where it was dropped. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. David, actually what I need is a bit more complicated but you might do great help. Enable draggable functionality on any DOM element. If you’re working on a site using jQuery UI, the Draggable, Droppable, and Sortable built in functionality can save a lot of time making a web application interface dynamic. Edited in response to comment from OP, to original question.
0 kommentar(er)
