客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：lukasoppermann/html5sortable开源软件地址：https://github.com/lukasoppermann/html5sortable开源编程语言：TypeScript 97.8%开源软件介绍：
HTML5Sortable
Table of Contents
Community maintainedA fair warning: this repository is currently not being actively developed. It works pretty fine, but if you find any issues you will need to fix them yourself. I try to keep the dependencies up to date and will happily help you fix issues and merge PRs for bugfixes or new features. Looking for Co-MaintainerIf you are interested in actively helping with maintaining & improving this project please send me a message via twitter @lukasoppermann or email [email protected] with a short text of what you would like to do on the project. This may be something small like sorting issues and helping with questions and small bugs (if you have little time or are not that experienced) or something big like tackling big features. Features
Demo: Check out the examples Framework adaptersIf you would like to add an adapter to the list, please create an issue with the link to your adapter. InstallationWe recommend installing the package via npm. Once you install the package using
Still using bower? ExamplesYou can find the examples online or test locally. Warning: the online demo is just to show off the features and is most likely not up to date. Please study this readme file for the current way of implementing and using DocsUsageUse sortable('.sortable');StylingUse sortable('.sortable', {
placeholderClass: 'my-placeholder fade'
});NestingYou can nest sortables inside each other. However, take care to add a wrapper around the items, a sortable-item can not at the same time be a <div class="list"><!-- Sortable -->
<div class="item"> Item 1
<div class="sublist"><!-- Nested Sortable; Wrapping container needed -->
<div class="subitem">Subitem 1</div>
<div class="subitem">Subitem 2</div>
</div>
</div>
<div class="item"> Item 2 </div>
</div>EventsNOTE: Events can be listened on any element from the group (when using sortstartUse sortable('.sortable')[0].addEventListener('sortstart', function(e) {
/*
This event is triggered when the user starts sorting and the DOM position has not yet changed.
e.detail.item - {HTMLElement} dragged element
Origin Container Data
e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
*/
});sortstopUse the sortable('.sortable')[0].addEventListener('sortstop', function(e) {
/*
This event is triggered when the user stops sorting and the DOM position has not yet changed.
e.detail.item - {HTMLElement} dragged element
Origin Container Data
e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
*/
});sortupdateUse sortable('.sortable')[0].addEventListener('sortupdate', function(e) {
console.log(e.detail);
/*
This event is triggered when the user stopped sorting and the DOM position has changed.
e.detail.item - {HTMLElement} dragged element
Origin Container Data
e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
e.detail.origin.itemsBeforeUpdate - {Array} Sortable Items before the move
e.detail.origin.items - {Array} Sortable Items after the move
Destination Container Data
e.detail.destination.index - {Integer} Index of the element within Sortable Items Only
e.detail.destination.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
e.detail.destination.container - {HTMLElement} Sortable Container that element is moved into (or copied into)
e.detail.destination.itemsBeforeUpdate - {Array} Sortable Items before the move
e.detail.destination.items - {Array} Sortable Items after the move
*/
});sortenterFired when a dragitem enters a sortable container. sortleaveFired when a dragitem leaves a sortable container. OptionsitemsUse the sortable('.sortable', {
items: ':not(.disabled)'
});handleUse the sortable('.sortable', {
handle: 'h2'
});forcePlaceholderSizeSetting the sortable('.sortable', {
forcePlaceholderSize: true
});connectWith
Use sortable('.js-sortable, .js-second-sortable', {
connectWith: 'connected' // unique string, which is not used for other connectWith sortables
});acceptFromUse the sortable('.sortable', {
acceptFrom: '.sortable, .anotherSortable' // Defaults to null
});Note: Using In the example the current list If you want to be able to move items between to sortables, the placeholderUse the sortable('.sortable', {
items: 'tr' ,
placeholder: '<tr><td colspan="7"> </td></tr>'
});hoverClassUse the sortable('.sortable', {
hoverClass: 'is-hovered is-hovered-class' // Defaults to false
});dropTargetContainerClassUse sortable('.sortable', {
dropTargetContainerClass: 'is-drop-target' // Defaults to false
});maxItemsUse the sortable('.sortable', {
maxItems: 3 // Defaults to 0 (no limit)
});copyUse the sortable('.sortable', {
copy: true // Defaults to false
});orientationUse the sortable('.sortable', {
orientation: 'horizontal' // Defaults to 'vertical'
});itemSerializerYou can provide a sortable('.sortable', {
itemSerializer: (serializedItem, sortableContainer) => {
return {
position: serializedItem.index + 1,
html: serializedItem.html
}
}
});containerSerializerYou can provide a sortable('.sortable', {
containerSerializer: (serializedContainer) => {
return {
length: container.itemCount
}
}
});customDragImageYou can provide a function as a The function gets three parameters, the dragged element, an offset object with the offset values for the offset of the item and the sortable('.sortable', {
customDragImage: (draggedElement, elementOffset, event) => {
return {
element: draggedElement,
posX: event.pageX - elementOffset.left,
posY: event.pageY - elementOffset.top
}
}
});
// elementOffset object that is received in the customDragImage function
{
left: rect.left + window.scrollX,
right: rect.right + window.scrollX,
top: rect.top + window.scrollY,
bottom: rect.bottom + window.scrollY
}MethodsdestroyTo remove the sortable functionality completely: sortable('.sortable', 'destroy');disableTo disable the sortable temporarily: sortable('.sortable', 'disable');enableTo enable a disabled sortable: sortable('.sortable', 'enable');serializeYou can easily serialize a sortable using the 全部评论
专题导读
上一篇：mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end imple ...发布时间：2022-06-17下一篇：coolwanglu/pdf2htmlEX: Convert PDF to HTML without losing text or format.发布时间：2022-06-17热门推荐
热门话题
 阅读排行榜
|
请发表评论