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.
sortable-dnd-lock-axis-fork
Advanced tools
Readme
A JS Library for Drag and Drop, supports Sortable and Draggable
HTML
<ul id="group">
<li class="item">
<i id="handle" class="handle">drag me</i>
<p>1</p>
</li>
<li class="item">
<i id="handle" class="handle">drag me</i>
<p>2</p>
</li>
<li class="item">
<i id="handle" class="handle">drag me</i>
<p>3</p>
</li>
</ul>
JavaScript
import Sortable from 'sortable-dnd'
var DND = new Sortable(
document.getElementById('group'),
{
chosenClass: 'chosen',
draggable: (e) => e.target.tagName === 'LI' ? true : false, // use function
// draggable: 'li' // use tagName
// draggable: '.item' // use class
// draggable: '#item' // use id
// draggable: (e) => e.target // use function to set drag Element
handle: (e) => e.target.tagName === 'I' ? true : false, // use function
// handle: 'I', // use tagName
// handle: '.handle', // use class
// handle: '#handle', // use id
onDrag: ({ from, event }) => {
// code
},
onMove: ({ from, event }) => {
// code
},
onDrop: ({ from, to, changed, event }) => {
// code
},
onAdd: ({ from, to, event }) => {
// code
},
onRemove: ({ from, to, event }) => {
// code
},
onChange: ({ from, to, event }) => {
// code
},
onSelect: (params) => {
// code
},
onDeselect: (params) => {
// code
}
}
)
Method | Description |
---|---|
destroy() | Manually clear all the state of the component, using this method the component will not be draggable |
option(key, value?) | Get or set the option value, depending on whether the value is passed in |
Common used
Option | Type | Default | Description |
---|---|---|---|
draggable | String/Function | - | Specifies which items inside the element should be draggable |
handle | String/Funnction | - | Drag handle selector within list items |
group | String/Object | - | string: 'name' or object: { name: 'group', put: true/false, pull: true/false } |
multiple | Boolean | false | Enable multiple drag |
animation | Number | 150 | Animation speed moving items when sorting |
onDrag | Function | - | The callback function when the drag is started |
onMove | Function | - | The callback function when the dragged element is moving |
onDrop | Function | - | The callback function when the drag is completed |
onAdd | Function | - | The callback function when element is dropped into the list from another list |
onRemove | Function | - | The callback function when element is removed from the list into another list |
onChange | Function | - | The callback function when the dragged element changes position in the list |
onSelect | Function | - | The callback function when element is selected |
onDeselect | Function | - | The callback function when element is unselected |
Others
Option | Type | Default | Description |
---|---|---|---|
disabled | Boolean | false | Disables the sortable if set to true |
chosenClass | String | '' | Class name for the dragging item |
selectedClass | String | '' | The class of the element when it is selected, it is usually used when multiple drag |
ghostStyle | Object | {} | The style of the mask element when dragging |
ghostClass | String | '' | The class of the mask element when dragging |
autoScroll | Boolean | true | Automatic scrolling when moving to the edge of the container |
scrollThreshold | Number | 55 | Threshold to trigger autoscroll |
delay | Number | 0 | Time in milliseconds to define when the sorting should start |
delayOnTouchOnly | Boolean | false | Only delay if user is using touch |
fallbackOnBody | Boolean | false | Appends the cloned DOM Element into the Document's Body |
stopPropagation | Boolean | false | The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases |
swapOnDrop | Boolean | true | When the value is false, the dragged element will return to the starting position of the drag |
FAQs
JS library for drag-and-drop lists, supports sortable and draggable
The npm package sortable-dnd-lock-axis-fork receives a total of 1 weekly downloads. As such, sortable-dnd-lock-axis-fork popularity was classified as not popular.
We found that sortable-dnd-lock-axis-fork demonstrated a healthy version release cadence and project activity because the last version was released less than 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.