camohub / jquery-sortable-lists Goto Github PK

The docs say:

Note that li items can contains only one or max two direct children.

Can you explain why there is this limitation and how we can work around it. I want to use "jsl" in a wysiwyg html editor to let the use rearrange lists. The content within an

<li>eric idle&nbsp;<i>was a&nbsp;<b>very</b> nice</i> <a rel="nofollow" target="_blank" href="http://www.person.com">person</a>.</li>

Right clicking an item makes it so that it's being dragged.

This plugin not working on my iPhone 7

At the moment its not possible to drag an element of one list to another. I'd like to see this in a future version.

Hi,
I have a problem with the ignoreClass property, I tried it as in an example and append it to my checkboxes which are rendered dynamically based on user interaction (so maybe it's the case) and so then inputs with class 'clickable' are still draggable.

Is there a possibility to insert new elements or remove existing elements from the list?
Should I do some reinitialization after add/remove element ? Can you explain me that flow?

Hi Camohub,

This is very useful plugin for me. As per app required, I want to save sequence of

I have a problem with isAllowed callback, the plugin doesn't give me the proper target element.

So I'm facing a problem where if an item is child I can't move to the outermost level. For example if the list consist of one item with a child. I'm not able to make that child a sibling of it's parent. Any idea on how I can make this possible?

I added a button on each item in a list but it seems like whenever I click the button it is dragging the item of the list.

How can I fix this issue?

Thank you.

Hello, is there a possibility to limit nesting level in this list? We only need main list and sublists, any other solution is unwatnted. Can I somehow limit the nesting level?

btw. I really like the lib, it is the best of its kind I found

Hi.. I'm in love with your plugin.
I just wanna ask if it's possible to store the nested sortable list into MySQL db?

As far as I see, inserting nested element is based on insertZone threshold currently. User has to move the mouse some distance from the left edge of the element and if this distance is above the threshold, dragged element is inserted as a child to hovered one.

We could add optional feature that allows to change (or extend) this behavior (from UX perspective): when user hovers the element, dragged one becomes its child. In my case all attempts to simulate this by changing insertZone made widget unusable (ex. when value is 0 there was no way to reorder elements).

Technically we may reuse the mechanism and create something like 'vertical insert zone'. If the mouse is close enough to the vertical center of hovered element, dragged one will become its child when dropped, otherwise elements are reordered.

See attached image for explanation.

What do you think?

I have an ajax process where I download the hierarchy and the items first. Then I populate my list dynamically. But the collapse and expand doesn't seem to work.

Is it easy to add a handle to the code, so only if I drag from a certain element within the LI will the whole LI move?

I would like to persist the menu in case the position was changed after a drop.
I implemented this in the 'complete' callback but I see that this callback is also called after just clicking a menu-item and not only after a drop to another position as expected.

I'm using an iPad Air 2 and implemented the changes you mentioned in issue #2.
The dragging seems to work ok but the issue I'm seeing is it does not register when I release the item.

I can use the zoom functionality on the iPad which then sometimes releases the item.

Does this support adding row, with 2 columns like a simple table row [text box , drop down list]

I'm using this plugin in my work and want to find out wheather this project will continue or not?

I could not get drag and drop to function on Android mobile using http://touchpunch.furf.com/

complete: function( cEl )
{
console.log( 'complete' );
},

hello,

I'd like to add a database update when a move is completed. But i got this error "Uncaught ReferenceError: cE1 is not defined" when i try to use cE1. I can see the content of cE1 with chrome debugger but only on the line "complete: function(cE1)".

Could you help me please ?

Thanks

Hey there! Thanks for this awesome library. I am using it to implement a system where upon clicking on a button, a new list item is added to the main ul. Now, the item does get appended but it doesn't receive the icons for the openers that i set in the options. I can see the list item and it's always opened without the '+' or '-' signs so i can't open or close that particular list item. Can you let me know how that would be done as the only way i found is to re-create the Sortable List using $('element').sortableLists({ options }) but that appends the '+' and '-' icons to each and every list item multiple times

Hi! Checking this out.

I noticed that if an item is already below other items in a group. Then dragging it right does not nest it under the item above it. Possible/How? Thx!

Example:

item1
item2
item3

drag item3 right

item1
item2
-> item3

dragging item3 right does not nest it under the above item, item2

Currently you have to drag it on top of a group of items above it.

And if it's already the bottom item, then it's not something a user might quickly understand to do. They may just try to drag it to the right. Since it's already below that item.

How can I do? Thx!

I have simple Tree content:

<li id="x-3">
    <div>Item 3</div>
    <ul>
        <li id="x-30"> <div>Item 30</div> </li>
        <li id="x-31"> <div>Item 31</div></li>
    </ul>
</li>
<li id="x-4"><div>Item 4</div></li>

It work normal if plain html
But when I load that content from ajax, It do not show [+] [-], at Item 3, like this img:

I don't understand that my mistake some where, or this is default of this tree?

Thank you much!

This image is loading tree content with ajax:

Am I allowed to put other HTML content in there? or is it only text.

For e.g. Drop down list, date picker, image

While starting to use the library, I realized I had to put a placeholder value on "ignoreClass" in order to allow dragging of elements.

For example, if you configure a sortable-list like this:

    var options = {
        placeholderClass: "placeholder",
        hintClass: "hintholder",
        opener: {
            active: true,
            open: DJANGO_SETTINGS.static_url('taxonomy/img/open.png'),
            close: DJANGO_SETTINGS.static_url('taxonomy/img/close.png'),
            openerClass: 'opener',
        }
    };
    $('.sortable-taxonomy').sortableLists(options);

you will not be allowed to drag the li elements.

But if you configure it like this:

    var options = {
        placeholderClass: "placeholder",
        hintClass: "hintholder",
        opener: {
            active: true,
            open: DJANGO_SETTINGS.static_url('taxonomy/img/open.png'),
            close: DJANGO_SETTINGS.static_url('taxonomy/img/close.png'),
            openerClass: 'opener',
        },
        ignoreClass: "none"
    };
    $('.sortable-taxonomy').sortableLists(options);

you will.

This plug-in looks fine, but there is no way to set a max-depth?

I want to remove the tree function. But I cant seem to find where I need to change something that the tree function is removed

Is there a possibility to set the max level? If you set it to 3 you only have 3 levels from the root object.
Thanks in advance

My structure is listed below. I want to allow the p1x's to be dragged around but NOT the PX level. The documentation sounded like I could use ignoreClass but that didn't work nor did setting draggable=false or overriding onDragStart. Can't use isAllowed because I need to disable the drag and not just the drop. Is there a way to accomplish this?

P1
--p1a
--p1b
P2
--p2a
--p2b

Hi!

Plugin is awsome, I have integrated successfully with no many issues but I have last one that still give me a headache.

I have defined this callback on drop completion:

complete: function(currEl)
            {
                var $tree = $sortable.sortableListsToArray();
                $.ajax({
                    url: '{{ path('admin_category_sort_component') }}',
                    type: 'POST',
                    data: { data : $tree},
                    success: function(data) {
                        //console.debug(data);
                    }
                });
            }

But sortableListsToArray function gave me an element with 'sortableListsPlaceholder':

...
    [order] => 0
 )
[2] => Array
(
    [id] => sortableListsPlaceholder
    [parentId] => 92
    [order] => 0
)
...

Seems sortableListsToArray is not waiting to id restore after drop completion.

I need export tree data on drop finish in order to save hierarchy automatically.

I'm making anything wrong maybe?

Thanks in advance.

How can I prevent the items from opening on hover? Which class do I have to deactivate?

Your help would be really appreciated!

Kind regards

Marc

I have an item that I don't want other items to be put inside of it. I am preventing this using the isAllowed in the options. The problem is that make it difficult to move items around because the library thinks that I'm trying to move the items inside each other but I'm really trying to change their postions. i.e:

+Parent1
+--Child1
+--Child2
+--Child3
+Parent2
+--Child1
+--Child2

Moving the children is a bit difficult because it thinks I want to put a child and in a child

From memory the GNU License prevents use in applications without open source release of all code in that application. Unfortunately this will prevent your code being used by many people. Please consider changing to a more permissive license.

I really like this implementation, I would like to know if it is possible to drag and drop items from a Draggable widget

I want to set a max nesting depth level (in my case 2).

Is this the right way to do that?

isAllowed: function(cEl, hint, target) {before showing).
    if (target.parents('li').length == 2) {
        hint.css('background-color', '#ff9999');
        return false;
    }
    else {
        hint.css('background-color', '#99ff99');
        return true;
    }
},

It looks like a valuable sortable package, but I struggle to make it work on my pc. There will be huge value of adding index.html working example in the package. It will let save 10mins for each person who downloads this package. Thanks!!!

I want to use add and remove li list. I can add easily with jquery but i don't know how to add delete button as open/close like button. How can i do it ?

Is there a way to set the maximum number of levels?

Hello this is very useful

i am trying add & remove list items and children with ReactJS

can i destroy event listener ?

@camohub if the list contains dropdown list, we cannot select the option from the dropdown list,

below is the example:
https://jsfiddle.net/haiquan180/szmjhjok/

input also doesn't work.

could you help me? i really need dropdown, input to work.

i am trying to install this via composer bower-asset library.

when will it support jquery 3.2.1

`
~/composer require bower-asset/jquery-sortable-lists
Using version ^1.3 for bower-asset/jquery-sortable-lists
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

Problem 1
- Installation request for bower-asset/jquery-sortable-lists ^1.3 -> satisfiable by bower-asset/jquery-sortable-lists[v1.3.0].
- Conclusion: remove bower-asset/jquery 3.2.1
- Conclusion: don't install bower-asset/jquery 3.2.1
- bower-asset/jquery-sortable-lists v1.3.0 requires bower-asset/jquery >=1,<3.0.0 -> satisfiable by bower-asset/jquery[2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.2, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.12.4, 1.12.3, 1.12.2, 1.12.1-patch1, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3-patch1, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.5, 1.2.4, 1.2.3, 1.2.2, 1.2.1, 1.2, 1.1.4, 1.1.3.1, 1.1.3, 1.1.2, 1.1.1, 1.1, 1.0.4, 1.0.3, 1.0.2, 1.0.1, 1.0].
- Can only install one of: bower-asset/jquery[2.2.4, 3.2.1].
- Can only install one of: bower-asset/jquery[2.2.3, 3.2.1].
- Can only install one of: bower-asset/jquery[2.2.2, 3.2.1].
- Can only install one of: bower-asset/jquery[2.2.1, 3.2.1].
- Can only install one of: bower-asset/jquery[2.2.0, 3.2.1].
- Can only install one of: bower-asset/jquery[2.1.4, 3.2.1].
- Can only install one of: bower-asset/jquery[2.1.3, 3.2.1].
- Can only install one of: bower-asset/jquery[2.1.2, 3.2.1].
- Can only install one of: bower-asset/jquery[2.1.1, 3.2.1].
- Can only install one of: bower-asset/jquery[2.1.0, 3.2.1].
- Can only install one of: bower-asset/jquery[2.0.3, 3.2.1].
- Can only install one of: bower-asset/jquery[2.0.2, 3.2.1].
- Can only install one of: bower-asset/jquery[2.0.1, 3.2.1].
- Can only install one of: bower-asset/jquery[2.0.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.12.4, 3.2.1].
- Can only install one of: bower-asset/jquery[1.12.3, 3.2.1].
- Can only install one of: bower-asset/jquery[1.12.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.12.1-patch1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.12.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.12.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.11.3, 3.2.1].
- Can only install one of: bower-asset/jquery[1.11.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.11.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.11.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.10.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.10.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.10.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.9.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.9.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.8.3-patch1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.8.3, 3.2.1].
- Can only install one of: bower-asset/jquery[1.8.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.8.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.8.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.7.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.7.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.7.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.6.4, 3.2.1].
- Can only install one of: bower-asset/jquery[1.6.3, 3.2.1].
- Can only install one of: bower-asset/jquery[1.6.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.6.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.6.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.5.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.5.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.5.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.4.4, 3.2.1].
- Can only install one of: bower-asset/jquery[1.4.3, 3.2.1].
- Can only install one of: bower-asset/jquery[1.4.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.4.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.4.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.3.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.3.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.3.0, 3.2.1].
- Can only install one of: bower-asset/jquery[1.2.6, 3.2.1].
- Can only install one of: bower-asset/jquery[1.2.5, 3.2.1].
- Can only install one of: bower-asset/jquery[1.2.4, 3.2.1].
- Can only install one of: bower-asset/jquery[1.2.3, 3.2.1].
- Can only install one of: bower-asset/jquery[1.2.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.2.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.1.4, 3.2.1].
- Can only install one of: bower-asset/jquery[1.1.3.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.1.3, 3.2.1].
- Can only install one of: bower-asset/jquery[1.1.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.1.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.0.4, 3.2.1].
- Can only install one of: bower-asset/jquery[1.0.3, 3.2.1].
- Can only install one of: bower-asset/jquery[1.0.2, 3.2.1].
- Can only install one of: bower-asset/jquery[1.0.1, 3.2.1].
- Can only install one of: bower-asset/jquery[1.0, 3.2.1].
- Installation request for bower-asset/jquery (locked at 3.2.1) -> satisfiable by bower-asset/jquery[3.2.1].

Installation failed, reverting ./composer.json to its original content.

`

Hi
We're planning on using your lib that we just discovered
it looks really cool
we plan on doing edit lines content and being able to add/remove new lines
it's fairly simple , I know, but maybe it's something you have allready done ?
Cheers

I have downloaded zip file, i am not getting how to configure it online. kindly help in this. I need this feature.

Is it possible to set a drag'n'drop handler element? By default, it's whole "li" element

Hello! Thank you for plugin. And i have quesion. How to make editable elements such as input text inside li? When i click to input, doesn't focus.

It looks like you can only commence a drag on

jQuerySortableLists opener as background image is deprecated. In version 2.0.0 it will be removed. Use html instead please.

i try this plugin in my project but i see this error
any don't know how can i fix this error

I really like the way it works as a browser and would like to use it that way.

Also is there a parameter which element of the tree is open and to open it there?

Thank you