Nestable | drop hierarchical list with mouse and touch compatibility | Plugin library

I am trying to add items to a dynamic drag and drop list (Nestable 2 from here which I've pretty much figured out.

I'm using a Bootstrap 5 modal to get input. Also working.

Now I add jQuery validation on my form input. This is also working as far as validation is concerned.

But, when I add a second item I get two new items added. On the third try, I get three items added.

This is my form submit code:

So I'm trying to create nestable element using Muuri

I've based my code on this example https://codepen.io/Hyzau/pen/rNmpowd
This is an edited version of Niklas Rämö's code with some console.log() added for comparison's sake.

In this code, you can see the receive and send event triggered when you move a red box from the left to the right. If you release the box, the dragReleaseStart is triggered.

Now I changed it quite a bit in order to fit my own needs. You can see my codepen here : https://codepen.io/Hyzau/pen/gOWoZmb In my code receive and send event are never triggered and I'm not sure why.

For each subgrid as well as the main grid, I have the following code

When running collectstatic on my production system, it seems like a bunch of files is stored recursively e.g. (real example):

Currently i am trying to get a feature which is i have a md-3 section and inside this section got a button and when clicking on the button, it generates more button and these button are draggable. When i click the button, i get a form on the md-9 and inside this form got toggable section and a save button there too. When i save on the particular sections, it displays on the md-3 section under the button.

But i have this issue where i want to make the sub section of the button to be draggable and deletable too.

Here is my code for: HTML:

I need some help in the accordion tab functionality where by I need to display the specific content of that accordion tab on the right side of the form. I have all accordion on the left side of the form.

Here is the code that I am working on HTML and JS:

I'm currently trying to implement my own take on Discord's flavor of markdown into my web application. The way I've done so is simply by chaining replace methods, each checking and replacing the syntax with proper HTML tags (I do sanitize, don't worry).

Concept: Suppose I have some function that creates some arrangement of multiple subplots. Now I want to make a grid of these.

Thus one has a set of subplot areas into which one wants draw a graph which itself has multiple subplots.

Solving this: The way I can do this if I knew ahead of time the whole layout I could with patience figure out how to specify the each plots absolute position and size. Then I could lay this out in absolute coordinates using the subplot2grid() command.

Problem: YUCK! when you write a function to make a fancy graph with subplots, you may be just using this as is. Then someday you want to have a grid of these. You don't want to go back and re-write the original one to now work on a grid. And if you edit that original function you don't want to have to rethink how to cast it into a grid all over.

What you want: logically it would be super delightful if subplots were nestable. so you want something like this. but this doesn't exist.

I have this jQuery nested list module:

https://github.com/dbushell/Nestable

This is an old version and no longer supported. There are similar packages, but this one is easy to use and is clean.

The demo works:

Demo: http://dbushell.github.io/Nestable/

I started with pasting the demo code into my Rails app it works as intended except one huge issue which I will have trouble explaining other than a video:

The list items won't indent until you slightly drag them up onto a parent slightly. In the demo these just know to indent after a certain y mouse movement.

I created a Fiddle:

https://jsfiddle.net/jasper502/oLyfc8m0/8/

It works fine in the the fiddle also. I can't easily post my code - it's production. I suspect that it's the outer nested divs etc that I have in my code. I a standard top nav bar / side nav bar / content layout. The crazy thing is the template I used for this site has this as a demo and it works fine also:

http://webapplayers.com/inspinia_admin-v2.9.2/nestable_list.html

I have seen issues like this where element position etc are all thrown off by this. I had issues with tooltips etc. and it was solved with something like this:

I'm working on ecommerce website, Stuck in nav bar, I have created routes something like this: