jquery drag removing an element changes position of other dropped element - javascript

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.

Related

Javascript\Jquery mouse cursor - Inconsistencies when hovering items

I'd like to replace the mouse cursor on my website with a custom one, composed of two elements:
a cursor;
a trail that follows the cursor and lags behind it.
Doing that with jquery is extremely easy.
1) You hide the default cursor in CSS:
html, body {cursor:none;}
2) You create two different divs (one for the cursor itself and one for the trail) and style them:
<div id="mouse_cursor" class="mouse_cursor"></div>
<div id="mouse_trail" class="mouse_trail"></div>
3) You create the logic for each one of them:
function moveCursor(e) {
$('#mouse_cursor').css({'left' : e.pageX,'top' : e.pageY });
}
$(window).on('mousemove', moveCursor);
function moveTrail(e) {
TweenMax.to('#mouse_trail', 0.35, {
css: {left: e.pageX,top: e.pageY},
ease:SlowMo.easeIn
}
)};
$(window).on('mousemove', moveTrail);
(In my case the trail effect is made using Greensock's GSAP).
Now... this works perfectly as long as the cursor style isn't changed. Here's a fiddle, for your reference: https://jsfiddle.net/collederfomento/jvy1zfg8/27/
I'd like to change the style of the cursor once it hovers specific elements, however, and that's where I am encountering a few issues.
The way I have attempted to do that is the following:
1) Create a function bound to the mouseenter \ mouseover events that adds a class to the cursor if it's hovering the element:
$(".hover").bind( "mouseenter mouseover", function() {
$("#mouse_cursor").addClass("mouse_cursor_hover");
});
2) ... and then a second function that removes the class once the cursor is not hovering the element anymore:
$(".hover").mouseleave(function() {
$("#mouse_cursor").removeClass("mouse_cursor_hover");
});
3) Lastly, of course, I added the style for the "hover" cursor:
.mouse_cursor_hover {width:300px;height:300px;}
As you can see in this fiddle ( https://jsfiddle.net/collederfomento/z4e1qjbc/13/ ) the hover event is not firing properly, and the mouse cursor flickers.
I have tried several other approaches (using Javascript event listener rather than the above mentioned functions, using the css property rather than toggling a class, etc.) but they all behave in the same way.
What's curious is that if I remove the functions that make the cursors move, then the hover event is handled flawlessly. I believe the combination of the two functions is causing the issue, but I have no clue why (or how to solve it).
I think the cursor and the trail elements are interfering with the hover events. Even though they are at a high z-index, the browser still has to take them into account to figure out which element is actually getting hovered. The mouse cursor is still going over them after all, since they are not a “real” cursor, but actual elements positioned in that place.
Adding pointer-events none to both of them seems to fix the issue for the most part (checked in Chrome and Firefox, in both it seemed to significantly improve), so please give that a try:
.mouse_cursor,
.mouse_trail {
pointer-events:none;
}
https://jsfiddle.net/aur39py4/1/
I am assuming that you are not going to need any sort of hover effect on the cursor and trail themselves, so setting pointer-events:none should not have any adverse effects on the rest of what you’re doing on the page.

How to get Gridstack.js widgets to remove when dragged to specified div

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).

Contain draggable to multiple elements

I write a userscript for a website, and the script includes a jQuery UI draggable. Greatly simplified, the site has two rows, and each row has two divs placed horizontally.
The site layout previously used two columns with inner divs instead of rows. The draggable was constrained to the right column's parent, which is exactly what we wanted. Now, however, there's no way to constrain to the right "column" because that column no longer exists in the DOM.
Is there a way to fluidly contain the draggable div to the right column of divs without the old parent element? I can add elements to the DOM (or do whatever) if needed, we have the full power of jQuery and jQuery UI available. I know it would be possible to use a droppable on the top right div, but from what I understand that would cause the draggable to snap between the two. If that's the only option then I'll do that, but if there's another method I would love to see it.
FIDDLE
<div id="outercontainer">
<div id="toprow">
<div id="topleft"></div>
<div id="topright"></div>
</div>
<div id="bottomrow">
<div id="bottomleft"></div>
<div id="bottomright"></div>
</div>
</div>
<div id="dragme"></div>
The actual containment value used in constraining position is an array of coordinates that's being calculated based on the object you set in the options themselves. But you can access this containment property on the draggable instance and modify them as you wish. The only restriction is that it needs to be a rectangle, you cannot mix shapes.
In your case, you can simply work out the coordinates from the elements.
$("#dragme").draggable({
// You still need to set a value for containment
// else it won't be checked when evaluating the position
containment: 'document',
start: function(e, ui) {
// You simply set a left, top, right, bottom coordinates.
// You need to set it on start so if the elements have been
// resized, the containment follows.
var cont = [
$('#topleft').offset().left + $('#topleft').outerWidth(),
$('#toprow').offset().top,
$('#toprow').offset().left + $('#toprow').outerWidth() - ui.helper.width(),
$('#bottomrow').offset().top + $('#bottomrow').outerHeight() - ui.helper.height(),
]
$(this).draggable('instance').containment = cont;
}
});
https://jsfiddle.net/nxxbh8eL/

jQuery Multisortable with CustomScrollBar

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);
},

Why does jQuery slideToggle() function acts strangely for me in my table?

I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.
It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.
This is my script:
$(document).ready(function() {
$('#show-more-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
$('#show-less-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
);
Here is a jsFiddle for my table.
Any help and tips will be appreciated!
jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.
Here's your fix: http://jsfiddle.net/5SYBe/12/
The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)
So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.
The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..

Categories