I am using the mulisortable jquery plugin (github.com/shvetsgroup/jquery.multisortable) along with mcustomscrollbar plugin (manos.malihu.gr/jquery-custom-content-scroller), and I am having trouble displaying the dragged items "overtop" of the customscrollbar containers.
As an example, I have 4 separate containers that utilize the custom scrollbar, and inside each of these containers I have various lists that are connected by the multisortable plugin. I am able to drag selected items from a list in one container to a list in another container, however since the custom scrollbar adds overflow:hidden to its container, the dragged items go "behind" the lists/containers.
My question is: how do I make the dragged items appear in front of the containers
Things I've Tried:
I have removed the overflow:hidden properties from the scrollbar, which does what I want, but then when scrolling, the scrolled content appears outside of the container, which is not good.
I have tried using the helper:"clone" setting in the multisortable options, but this seems to only clone one item (instead of multiple) and my originating list css does unexpected things.
I have also tried setting the z-index on those items which are selected, however this also doesn't seem to help.
Here is my jsfiddle: http://jsfiddle.net/ML49V/12/
If anyone has come across this before and has any suggestions, I would appreciate it.
Thanks
After doing some searching I found the answer. If you add the lines below to the mulitsortable options, it works as intended.
The working jsfiddle is here: http://jsfiddle.net/ML49V/13/
stop: function (e, ui) {
var elements = ui.item.data('multidrag');
ui.item.after(elements).remove();
},
helper: function (e, item) {
if (!item.hasClass("selected")) {
item.addClass("selected").siblings().removeClass("selected");
}
var elements = item.parent().children(".selected").clone();
item.data('multidrag', elements).siblings(".selected").remove();
var helper = $('<li/>').css('list-style', 'none');
helper.height('auto');
return helper.append(elements);
},
Related
I have used jQuery drag functionality in my application.
So what is happening is if I have multiple div's which I have used drag functionality and if I remove one div and remaining div's are changing its positions.
Following is the changes which i tried to solve this:
Tried adding position:absolute But still it doesn't work for me.
Here is my Div.
<div class="form-group movable col-2" id="div_1_2" style="height:30px">
Every Div of mine has its own unique Id's.
$("#div_1_2").draggable({
cancel: 'text',
drag: function(event,ui)
{
dragposition = ui.position;
//Here i am adding positions of left and right to my json index
},
});
Here is my Remove particular Div code:
function getRmControllers()
{
//Here I have code for removing particular index from json
$('#div_1_2').remove();
}
So far this is the code I am using, can anyone help me where I did mistake and how to resolve this.
I'm trying to get widgets in a grid to get removed when a widget is dragged into a separate Div, but I can't seem to get it working using 'removable' in the grid's options.
I've been through the docs (https://github.com/gridstack/gridstack.js/tree/develop/doc) and tried different options that are on there as well as tried to replicate one of the demos that has the functionality working (http://gridstackjs.com/demo/two.html) I've looked for other people who've had these issues too but can't find any posts that were able to help with this problem.
The First Div is where I want to drag the widgets to, and the second is where I'll be dragging them from.
<div class = 'trash ui-droppable'>
<h1 class = 'text-center pt-4'><?= FontAwesome::light('trash'); ?>
</h1>
</div>
<div class = 'grid-stack mt-3 ui-droppable'>
<!-- Widgets set here -->
</div>
Here's the JQuery which sets the grid's options, the option that I think should be allowing widgets to be dropped into is removeable and set it to the first Div's class name of ".trash".
var options = {
cellHeight: 100,
verticalMargin: 10,
removable: '.trash'
};
$('.grid-stack').gridstack(options);
What should be happening is I drag a widget over to the top Div, and the widget should be removed from the grid entirely but instead when dragged out and released acts like it's been dragged out the grid and places it back to where it was.
I had the same problem, which was fixed by giving the trash div a minimum height (like 75px).
I'm trying to find an better solution to drag multiple elements at once, all elements snapping to a grid, with jQuery UI draggable.
I found a working solution there for the multiple drag part. I adapted it to be able to use the grid with a "round to multiple" function :
function roundM(number, multiple) {
return Math.round(number / multiple) * multiple;
}
and saving the previous offset. You can see full code in this fiddle.
As you can see, it's working when you drag elements at a normal speed, but when dragging quickly, the other elements do not follow correctly the dragged element.
For now I can keep my solution, but if someone has a better one, I will be glad to test it :)
Thanks
Have a look at: https://jqueryui.com/draggable/#visual-feedback
Create a helper function resulting in Html representing your selected items and use it as 'visual feedback' when setting up your draggable.
The demo page referenced can be found here.
I'm trying to determine a way that on the click of a parent category (ex: Stone Tiles, Stone Sinks), that the JScrollPane would re-determine the current height and adjust as needed. Unfortunately, my attempts to do so have not worked yet.
I referenced the example here which provided the following function (to do a refresh)...
api.reinitialise();
I've tried to setup this function to be triggered by the category parents like so...
var pane = $('.menuwrap')
pane.jScrollPane();
var api = pane.data('jsp');
var i = 1;
$("li.expandable.parent").click(function() {
api.reinitialise();
});
Unfortunately, while I was able to verify the click is being rendered, the function (api.reinitialize) doesn't appear to be working. I'm hoping that a fresh pair of eyes could point me in the right direction. :-)
Thanks!
The problem is that api.reinitialise executes immediately after the click, and the li element will not have expanded yet so when jscroll pane goes to to recalculate the height it gets it wrong. You can try adding a delay but the best solution would be to bind api.reinitialise() to an event that's triggered once the your list has finished expanding. I'm not sure how you're expanding the div within the li but if for instance it's using .animate, you could bind the api.reinitialise to the animation complete event.
Also noted that not all the parent li's have the class parent associated it to them. I would expect you would want the pane to reinitialize on the expansion and collapsing of all the main li elements.
Hope that helps !
Cheers :)
What you can do is have your inner divs expanded by default, and then close them with jquery, rather than in the CSS directly.
So instead of doing this:
.mydiv.closed {display:none}
do this in your jquery after the elements are drawn to the page:
$('.mydiv.closed').hide();
This will load the jscrollpane at the necessary height, and then collapse what you want to be initially hidden.
I have two lists of elements, and I have enabled jQuery UI sortable on both of them. I used the connectWith option to enable me to drag between the two lists.
One list has a lot of elements in it, so I added overflow-y: scroll to it, but when I try to grab an element from that list and drag it to the other, it only scrolls the list, not the entire page.
I made a jsFiddle demo (http://jsfiddle.net/MCcuc/). Scroll down, and try to move Item Q (drag it by the gray bar on top of the box) from the red list into the green list. You'll see the red list scrolls, but the page does not. How can I scroll the whole page as well as the list?
I'm just enabling sortable without many options:
$('.sort').sortable({
connectWith: '.sort',
handle: '.handle'
});
That's indeed a conflict with scrollable overflow. The draggable helper element is constrained to its parent in that case, probably because trying to "get outside" the parent only results in enlarging its scrollable region.
A workaround is to pass a helper function that clones the dragged element and reparents it under the page body. This way, the draggable helper element will be outside of its original parent from the start, and therefore will scroll the entire page:
$(".sort").sortable({
connectWith: ".sort",
handle: ".handle",
helper: function(event, element) {
return element.clone().appendTo("body");
}
});
You will find an updated fiddle demonstrating this here.