I'm using Vue.Draggable to implement drag and drop sorting on a table element. Some of the draggable elements in the table are quite tall (tbody tags with many rows), so I would like to reduce the height of the so-called "ghost" element while the drag is happening.
To clarify, the drag "ghost" element is the copy of the dragging element that changes position in the list in real time. It's the blue element in this example:
https://sortablejs.github.io/Vue.Draggable/#/simple
(I'm not talking about the "drag image:" the copy of the dragging element that sticks to the mouse cursor)
I have tried hiding all but the first table row with CSS:
.sortable-drag tr:not(:first-child) {
display: none;
}
But the library uses the height of the dragged element to calculate its position relative to the mouse cursor, so this makes the dragging process buggy and unpredictable.
Vue.Draggable is built on Sortable JS and it fires a number of events, so I'm wondering if there's a way to customize the element when the drag begins, if not some option in Vue.Draggable/Sortable that I can use.
The approach above (hiding all but the first row with CSS) actually works as expected, but not without some extra configuration. The "buggy and unpredictable" behavior I was seeing was from an unrelated feature in Sortable JS:
Sortable JS Wiki: direction option
Sortable will try to automatically detect which direction is used by default, but it is best that you give this value yourself.
Once I specified that the table should only sort vertically (by setting the direction="vertical" prop on my Draggable component), the drag ghost started working the way I had hoped.
Related
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 it and set the location on the image by setting the top/left style of the div. However, the problem I am having is that the offset[XY] is the point of the mouse down. So if I grab the upper left corning my div lands where I expect. If I grab the div in the middle, then it is off by the drag point offset.
How can I correct for this offset of the draggable? Or is there a better solution?
One of my coworkers came up with a great solution. Subscribe to the mousedown event to find the offset and then do the math.
My question relates to a excellent javascript library called packery which I am using to create a masonry style layout. I am also using a sister script called draggabilly to allow the user to drag and drop (reorder) the items in the page. Currently I am doing something fairly similar to conventional usage:
http://codepen.io/desandro/pen/CKbkw
When you drag an item the interface leaves a space large enough for the element to be dropped. I wanted to place a div there temporarily to indicate that this is where the element will be dropped. All I really need is a way to get the x, y co-ordinates for where the dragged element will come to rest once released but I can't seem to figure out how to get that information.
and I am using a dragMove listener which is where I expect to display my div and provide it with the correct co-ordinates:
draggie.on( 'dragMove', function(draggieInstance, event, pointer) {
//code to display and position ghost div
});
Any assistance would be much appreciated.
I found some questions on stackoverflow about resizing div elements already, but none of them get at quite what I'm looking for. What I'm curious about it demonstrated perfectly here
If you hold down the mouse, you can create a new event. You can drag the boxes from the top or bottom to lengthen the event, and you can move the boxes between columns (and it will always occupy the full width of that column when moved into it. I want to know how something like this is accomplished in HTML and JavaScript?
In a web page, I have several overlapping html tables (set by using css style position:absolute). In the cell of one of these tables, there is a div element defined, with a click event on it (using jquery).
Here is the problem : if a div element is covered by an empty cell of another overlapping table, the div element wont receive click events anymore. One of the conditions to make this happened is that the covered div have to be set in DOM structure before the covering table.
See this jsfiddle for a better example. As you can see, red element dont receive click events anymore (because covered by the top empty cell of table containing blue element).
I know it sounds strange to have a page like this, but the reason is that in the real application these tables are ui-draggable (thus they can overlap), and the table structure is used to display small organizational charts).
Notes :
I cannot just exchange tables position in DOM or add a z-index on one of the tables to solve the issue, because as said earlier the tables are draggable (using jquery-ui) thus user can change the situation (blue can overlap red or red can overlap blue).
The only way to do this with CSS, without modifying HTML, is to set pointer-events:none; to the overlapping table, and then pointer-events: all; to the specific TD that is blue.
See this fiddle.
I have a div with an image and some text. I want the whole div to be draggable, but only upwards. When the visitor drags the div upwards with their mouse, there is content under the div, that doesn't move. That means that that content is already there. The draggable div is overlapping it. A good example of what I want to do is the Microsoft Windows 8 lock-screen. You drag up, and the login screen is under it. Thanks!
I was trying to do something very similar to your problem not a while ago. If you want an element which can be dragged up use the axis option in the draggable() tool in jQuery UI. You would need:
$(document).ready(function() {
$("div").draggable({
axis: "y"
});
});
This defines it as draggable, and only on the Y-axis (vertical).
One option would be to use jQuery UI's draggable feature.
http://jqueryui.com/demos/draggable/