Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
netsells-nestable
Advanced tools
Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin) - Netsells fork
Readme
This repo is a fork of Nestable by dbushell, who unfortunately cannot provide anymore support. The vast majority of pull requests from the original repository have been integrated here and tested in production.
I will continue the development of this fork according to my own needs or if I find bugs.
This being said, @RamonSmit has apparently taken the lead on an active dev branch of Nestable here.
Write your nested HTML lists like so:
<div class="dd">
<ol class="dd-list">
<li class="dd-item" data-id="1">
<div class="dd-handle">Item 1</div>
</li>
<li class="dd-item" data-id="2">
<div class="dd-handle">Item 2</div>
</li>
<li class="dd-item" data-id="3">
<div class="dd-handle">Item 3</div>
<ol class="dd-list">
<li class="dd-item" data-id="4">
<div class="dd-handle">Item 4</div>
</li>
<li class="dd-item" data-id="5">
<div class="dd-handle">Item 5</div>
</li>
</ol>
</li>
</ol>
</div>
Then activate with jQuery like so:
$('.dd').nestable({ /* config options */ });
The callback
provided as an option is fired when elements are reordered or nested.
$('.dd').nestable({
callback: function(l,e){
// l is the main container
// e is the element that was moved
}
});
You can get a serialised object with all data-*
attributes for each item.
$('.dd').nestable('serialize');
The serialised JSON for the example above would be:
[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]
You can change the follow options:
maxDepth
number of levels an item can be nested (default 5
)group
group ID to allow dragging between lists (default 0
)callback
callback function when an element has been changed (default null
)These advanced config options are also available:
listNodeName
The HTML element to create for lists (default 'ol'
)itemNodeName
The HTML element to create for list items (default 'li'
)rootClass
The class of the root element .nestable()
was used on (default 'dd'
)listClass
The class of all list elements (default 'dd-list'
)itemClass
The class of all list item elements (default 'dd-item'
)dragClass
The class applied to the list element that is being dragged (default 'dd-dragel'
)noDragClass
The class applied to an element to prevent dragging (default 'dd-nodrag'
)handleClass
The class of the content element inside each list item (default 'dd-handle'
)collapsedClass
The class applied to lists that have been collapsed (default 'dd-collapsed'
)noChildrenClass
The class applied to items that cannot have children (default 'dd-nochildren'
)placeClass
The class of the placeholder element (default 'dd-placeholder'
)emptyClass
The class used for empty list placeholder elements (default 'dd-empty'
)expandBtnHTML
The HTML text used to generate a list item expand button (default '<button data-action="expand">Expand</button>'
)collapseBtnHTML
The HTML text used to generate a list item collapse button (default '<button data-action="collapse">Collapse</button>'
)Inspect the Nestable Demo for guidance.
collapsedClass
on loading will be collapsed automaticallytoArray()
function by Goktugchange
behaviour with a callbackel.closest
instead of el.parents
maxDepth
option (default to 5)listClass
and itemClass
.group
option to enabled the above.Author: David Bushell http://dbushell.com @dbushell
Contributors : Cyril http://tchap.me, Craig Sansam http://craig.sans.am
Copyright © 2012-2013 David Bushell | BSD & MIT license
FAQs
Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin) - Netsells fork
The npm package netsells-nestable receives a total of 0 weekly downloads. As such, netsells-nestable popularity was classified as not popular.
We found that netsells-nestable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.