function init_gearbrowser_draggables() {
$("#gearbrowser_product_list div.product").draggable({
start: function() {
counts[0]++;
},
containment: '#sandbox_space',
refreshPositions: true,
helper: 'clone',
appendTo: '#sandbox_space',
zIndex: 12,
delay: 200,
scroll: false,
scope: "sandbox_items",
stop: function(event, ui) {
sb_index_items();
}
});
} // init_gearbrowser_draggables
// define drop space
$('#dragspace').droppable({
scope: "sandbox_items",
accept: "div.product",
tolerance: "fit",
drop: function(event, ui) { //on drop
// alert("dropped");
ui.draggable.attr("id", "sb_item");
item_pos_top = ui.position.top;
item_pos_left = ui.position.left;
ui.draggable.css("top", item_pos_top);
ui.draggable.css("left", item_pos_left);
ui.draggable.detach().appendTo($(this));
}
});
Hello everyone,
I facing a (probably rather simple) glitch in a JQuery UI draggable/droppable setup.
The below fiddle shows:
a left menu for new draggable divs (dog) a background droppable area
with
existing draggable items (red squares)
a size of 3000 x 2000 and it's parent set to overflow:auto;
DOM id: #sandbox_space
It does scroll fine
has a beach background to better indicate the position while scrolling
The problem:
Dragging the dog to the right onto the droppable #dragspace (is #sandbox_space.ul) works fine unless
we first scroll to the right to about 75%.
Dragging the dog to the right will then result hitting an "edge".
So it is not possible to drag the dog beyond that point.
Trying to do so by scrolling 100% to the right, results in the dog
being placed on the far left.
"containment" and "appendTo" options in .draggable()
for the dog are set to #sandbox space, which is the full 3000 x 2000 px.
This only happens with a horizontal scroll past approx 75%.
It does not happen with a vertical scroll.
I understand that this is either a problem with the draggable/dropppable options
in JS or a rather stupid CSS-realted issue that I cannot figure out at this point.
Your tips are highly appreciated.
Thanks a lot !
https://jsfiddle.net/60evfLdh/12/
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 am busy with a webpage where an image is draggable and droppable in another element.
On chrome, everything works perfect and the image is draggable across the whole screen
On Firefox, the image X axis is perfectly underneath mouse, but the Y axis isnt.
It somehow stops at an "invisible" border. The top-style wont go higher then -31. and thus will not be able to be dropped across the whole screen. Only in the top part of the screen (about ~50px height)
I use the Jquery methods
$(".class").draggable({
helper: "clone",
revert: false,
containment: "body",
scroll: false
});
and
$('#element').droppable({
accept: ".class",
And to identify the position of the mouse i use this code:
var offsetTop = $XXXX.offset().top;
var offsetLeft = $XXXX.offset().left;
I have also tried to use .offset().bottom but this was the exact same result.
I have also tried to use
$(window).load(function ($) {
instead of:
$(document).ready(function ($) {
But this made the whole draggable element not draggable anymore. (both on chrome and firefox)
I have also used the method: .offsetTop instead of offset().top but this didnt change anything. Same problem as before.
The solution was: the method draggable had this option: containment: "Body". This was wrong and should've been: false.
So final code:
$(".class").draggable({
helper: "clone", // use a clone for the visual effect
revert: false,
containment: false,
scroll: false
});
I am trying to build a list of draggables but the drag event somehow interferes with the scroll event on mobile devices (tested on a windows tablet, on desktop pcs it works fine). I can either scroll or drag but not both. If I set "-ms-touch-action" and "touch-action" to none, I can scroll, if I don't set it, I can drag.
Touch-punch is included as well. I think, the best way to solve this problem would be triggering the drag event by holding the item for one or two seconds, but I can't get that to work.
It is important that the overflow of the list is set to visible on start and back to '' on stop, because I have to drag the items out of the divs boundaries and my application doesn't allow me to do it in any other way.
You can test the code here: http://jsfiddle.net/LQuyr/344/
Hope you guys can help me. Thanks.
// draggable
$('#sortable li').draggable({
scroll: false,
helper: 'clone',
start: function(e, ui) {
$('#sortable').css('overflow', 'visible');
},
stop: function(e, ui) {
$('#sortable').css('overflow', '');
}
});
Maybe the delay option is what you're looking for...
$('#sortable li').draggable({
delay: 300,
scroll: false,
helper: 'clone',
start: function(e, ui) {
$('#sortable').css('overflow', 'visible');
},
stop: function(e, ui) {
$('#sortable').css('overflow', '');
}
});
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/