I have three div areas. Creating an element, which is draggable() with jQuery UI, I can drag it all over the screen. Dropping it in a special area, then I can not drag it any more.
I created a full working demo: http://jsbin.com/enusu4/2/
There you can create a draggable element which is placed into the left green area. Dragging it to the middle or right green area, I can not drag the element.
I increment the zIndex of the elements, but it does not work.
Does anyone can help me, what's wrong?
Best Regards.
Add z-index:-1; for 2nd and 3rd divs.
Related
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.
Is there a simple way to trigger a hover event on all overlapping elements? I'd love to be able to do it with just CSS.
Here is a little example: jsFiddle
Basically I have a few rows of divs which will move with the page when I scroll. Then a single overlapping div with it's position set to fixed. Both sets of divs have a CSS:hover event to change their background color so they get highlighted when I mouseover them.
My goal is to make it so that when I mouse over overlapping it turns red AND whatever sample text div that is behind it turns grey.
The only way I can think of to do this right now is with javascript. And it's inelegant. Basically get the mouse position on the overlapping div, and loop through all the sample text divs to check if their position is under the mouse.
I have some droppable areas, which are also draggable. It can happen that two or more droppable areas will get behind each other. Is there a way to drop a draggable item only into the area that is in the front? (z-index)
The situation is now, that the item gets added to all the areas, that are overlapping.
Thank you
Ok I have now a quite good solution and I want to share it with you guys...
I have build a small plugin
https://github.com/vaceta/jquery-top-droppable
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/
How can we make a div movable from here to there. I tried using JQuery Drag, Drop & sortable kind of things but my requirements is not fulfilling.
I have a plenty of DIVs on the page and i need to drag & drop a DIV_1 onto DIV_2,then DIV_2 should be adjust/set in place of DIV_1. Such drag n drop kind of things works when i have very few DIV but it doesn't work when i have many DIVs inside differnt ROW(div) & COLOUMN(div).
Does anybody tell me?
You've got to use jQuery Draggable & Droppable ... programming it yourself might be a bigger pill than you'd want to swallow.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/