I have a style problem with jQuery Ui draggable elements.
here what i have
FIDDLE
As u can see, i have two droppable areas , in each area elements are draggable, and can drag and drop element from one block to another
The only problem here , that when i am dragging element from top block to below block, the dragging element gets under droppable are elements, but when i am dragging from bottom are to top there is no such problem.
Here is the code for dragging
$(".slide").draggable({
// brings the item back to its place when dragging is over
revert:true,
// once the dragging starts, we decrease the opactiy of other items
// Appending a class as we do that with CSS
start: function(event, ui) { $(this).css("z-index", a++); },
drag:function () {
$(this).removeClass('droped');
},
// adding the CSS classes once dragging is over.
stop:function () {
$(this).addClass('droped');
},
zIndex: 10000,
snapMode: "inner"
});
Can anybody help me please, i am working on it already 2 days, and can't figure out what is the problem, i have tried to change z-index positions of every block, but no result;
I found out that my code only worked the first time - i removed some z-indexes from your JQuery ánd your css, now it is working for me every time:
http://jsfiddle.net/zbo7g5nz/5/
My jFiddle doesnt seem to get updated to share.. Here is working code:
$(".slide").draggable({
// brings the item back to its place when dragging is over
revert:true,
// once the dragging starts, we decrease the opactiy of other items
// Appending a class as we do that with CSS
start: function(event, ui) { $(this).css("z-index", a++); },
drag:function () {
$(this).parent().css('z-index', '10001');
$(this).removeClass('droped');
},
// removing the CSS classes once dragging is over.
stop:function () {
$(this).parent().css('z-index', '10001');
$(this).addClass('droped');
},
zIndex: 10000,
snapMode: "inner"
});
I gave a z-index to the ul holding the li that was higher than the li of the list that was below.
Avoid tricks and go with divs instead of UL or LI for further compatibility.
Also, you don't need to listen to the start event to setup the z-index property. The .draggable() api exposes the zIndex prop for that reason.
Here is the demo working:
http://jsfiddle.net/zbo7g5nz/8/
Related
Link to Video: https://youtu.be/16OXCpw3MBs
I have a stange one, I have three div's two of which scroll horizontal/vertical all of the divs have cards in that are draggable to enable moving of cards and ordering them. All works fine until you scroll one of the div's so that the columns are "under" another div.
I have attached a video to try to show this as I can't think of of an easy way to explain the issue.
Here is the drag and drop code:
$(function () {
$('ul.sort')
.sortable({
containment: 'document',
helper: 'clone',
appendTo: "body",
connectWith: ".sortable",
stop: function (e, ui) {
//Functions removed for security - some AJAX made here
}
},
})
.disableSelection();
});
I thought Z-Index would sort it but the draggable component is connecting with droppable elements under the element I want it to connect with.
Thanks in advance.
Link to Video: https://youtu.be/16OXCpw3MBs
I have a simple drag and drop functionality that I'm attempting to get working. I have cards that are draggable and can be dropped on top of other cards to swap positions with the other card. Here's a fiddle with the functionality in place: https://jsfiddle.net/vj0a9gp8/1/
The drag and drop code is pretty simple:
$(function() {
$(".card"). draggable({
revert: true
}). droppable({
hoverClass: "card-hover",
drop: function(event, ui) {
swapNodes($(this).get(0), $(ui.draggable).get(0));
}
});
});
function swapNodes(a, b) {
var aparent = a.parentNode;
var asibling = a.nextSibling === b ? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}
Basically when a card is dragged and then dropped onto another, the swapNodes function traverses up the dom and places them where they belong. This all works great. The issue, which you can see in the fiddle, is that when the drop occurs the dropped card kind of jerks off screen before animating in to place and it looks poorly overall. I've tried playing around with draggable.position to address and fix this functionality but all I've managed to do is make it worse. Any ideas?
When you drag your element, it changes the left and top position. When you drop it, you change its position in the DOM, but you never specify a new top and left, so it still keeps the one set when dragging it. The animation is there because you have a revert to true, which puts back the original position and animates it.
Easy solution would be to set revert to 'invalid' (so only if there's no drop) and set the left and top in your swap function. Like this
revert: 'invalid'
...
b.style.left = '';
b.style.top = '';
https://jsfiddle.net/huw2Lkgb/1/
I cannot drag the div, once it is dropped into the droppable bound div.
I have a multiple rows which are set to droppable where controls like textbox, checkbox etc etc are inserted. And each control is wrapped with draggable div.
For the first time when a column is dragged and dropped into droppable bound div, it works fine, then afterwards draggable stops. I tried to re-initialize draggable after a div is dropped but it din't work out too.
Below is how I have implemented for every column after which these are appended inside one container to render:
function buildRow()
{
var formRow = $("div").attr('id', 'mainform')
.attr('rowIndex', rowIndex)
.attr('class', 'formrow ')
.attr('style', 'width: 100%;min-height:100px)
.droppable({
accept: "#formColumn",
drop: function (event, ui) {
$(ui.draggable).draggable('destroy').draggable({
containment: $('#formControlsPlaceholder'),
cursor: 'move'
});
}
});
var formColumn = $('<div>')
.attr('id', 'formColumn')
.attr('style', 'width:80%;max-width:100%;')
.draggable({
containment: $('#container'),
cursor: 'move'
});
}
Actually the problem was not in draggable. On dropping an element or control to the new row, I had used attr('style') to give the equal width for all the elements inside it. But I was not aware that setting attr('style') would replace all the existing styles, as a result the binding of Draggable to the DOM was also broken.
Once I replaced attr('style') with css('width', 'sth') then it worked.
:D
Dhiraj Dhakal
If you take the following example: http://jsfiddle.net/99yVq/2/ and drag one of the top portlets and drop into the top of the black area (representing a menu), it reverts to the top left before snapping into position. I'm presuming this is related to my method of animation (showing and hiding an invisible placeholder) as when I remove the .show and .hide revert functions as expected.
.sortable call:
$( ".content" ).sortable({
handle: '.portlet-header',
items: '>:not(.fixed)',
revert: true,
start: function(e, ui){
$(ui.placeholder).hide(300);
},
change: function(e,ui) {
$(ui.placeholder).show(300);
}
});
$( ".content" ).disableSelection();
Does anyone know the cause of this?
Thanks in advance.
Edit They also do it if you drag them way off to the right, or onto the fixed portlet. also stripped down the test case.
Update for Answer
Taking into account the answer below I have updated the fiddle using .animate and setting the widths rather than hiding the placeholder. The animation is not quite as rugged but it's good enough!
The item you want to sort is appended to the placeholder (if set). As you are hiding the placeholder, theres no display style left and the item is appended to the body instead. If you want to keep the placeholder but want to "hide" it, think about styling it that way - with keeping it as a block element.
start: function (e, ui) {
$(ui.placeholder).css('width', 0);
},
change: function (e, ui) {
$(ui.placeholder).css('width', auto);
}
I have a number of draggables with images in them that I want to drop into folders. To conserve space (and make more draggables visible on the screen at one time), I'm hiding the images with CSS during the drag. How can I keep the mouse on the draggable when the images disappear?
Here's an example of what I'm seeing, just using a simple draggable box:
$( "#draggable" ).draggable({
revert: "invalid",
cursor: "move",
scroll: false,
cursorAt: { top: 5, left: 5 },
start: function(event, ui) {
$('img').addClass('hidden');
},
stop: function(event, ui) {
$('img').removeClass('hidden');
}
});
http://jsfiddle.net/fBPdF/
The hidden class uses display:none; to hide the images. As you can see in the fiddle, dragging the first image works fine, and the mouse tracks along in the upper left-hand corner of the box while you drag. When you drag the second, the mouse floats off to the side because the cursorAt value has already been set when the images get removed.
I'd prefer not to use a helper clone (because that makes the move look more like a copy), but that's the only way I've found so far to make it work. I tried resetting the cursorAt inside a timeout in the start function, but it didn't seem to have an effect.
Is there a way to keep the cursor and the draggable together somehow?
Try to change opacity. The hidden attr get off the element from "index".
.hidden {
opacity: 0;
}
http://jsfiddle.net/eEgTL/