
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
@transformation-dev/dragster
Advanced tools
Port of Ben Smithett's dragster to ES6. Wraps native dragenter/dragleave to behave like mouse event when hovering over child DOM elements.
@transformation-dev/dragster
@transformation-dev/dragster
is a port of Ben Smithett's dragster to ES6.
It wraps the native dragenter/dragleave to behave like mouse event when hovering over child DOM elements.
reset()
destroy()
method that can be used as a callback to
remove said instances. If you use this with Svelte's use:
directive, then Svelte will automatically call destroy()
as
something is removed from the DOM.To install with npm
npm install --save @transformation-dev/dragster
In a .svelte file
<script>
import {Dragster} from '@transformation-dev/dragster'
function addDragster(node) {
return new Dragster(node)
}
let thingBeingDragged
function dragStart(event) {
thingBeingDragged = event.target.id
event.target.style.opacity = .5
}
function drop(event) {
const id = event.target.id
Dragster.reset(event.target) // Very important!
console.log('id of drop zone', id)
console.log('id of thing being dragged', thingBeingDragged)
}
function enter(event) {
event.target.style.background = 'grey'
}
function leave(event) {
event.target.style.background = ''
}
function over(event) {
event.preventDefault() // Very important!
}
function dragEnd(event) {
event.target.style.opacity = ""
}
</script>
<style>
.draggable {
width: 200px;
height: 20px;
text-align: center;
background: blue;
}
.dropzone {
width: 200px;
height: 20px;
text-align: center;
background: purple;
}
</style>
<div use:addDragster id="must-be-unique" class="dropzone" on:drop={drop} on:dragster-enter={enter} on:dragster-leave={leave} on:dragover={over}>
Drop something on me
</div>
<div id='must-also-be-unique' draggable='true' class="draggable" on:dragstart={dragStart} on:dragend={dragEnd}>
Drag me
</div>
React's JSX and I suspect Angular, Vue, etc. have a similar syntax to above. In JSX, it's onDragster-start
. You may also have to
create Dragster instances yourself if your UI tech doesn't have
the equivalent to Svelte's use:
and you should probably manually
call destroy()
.
Plain HTML/JavaScript is essentially the same except you'll specify
the event listeners with addEventListener()
like in the
MDN web docs example except that you have to instantiate the
Dragster instances yourself and you should probably manually call
destroy()
.
FAQs
Port of Ben Smithett's dragster to ES6. Wraps native dragenter/dragleave to behave like mouse event when hovering over child DOM elements.
The npm package @transformation-dev/dragster receives a total of 0 weekly downloads. As such, @transformation-dev/dragster popularity was classified as not popular.
We found that @transformation-dev/dragster 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.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.