Comments (2)
let c1 = Snap('#svg')
.paper.rect(0, 0, boxHeight, boxWidth)
.attr({
id: item.uuid,
fill: 'rgb(220, 189, 149)',
stroke: 'rgba(102, 102, 102, 1)',
strokeLinecap: 'square',
strokeWidth: 1,
class: box-${item.sort}
})
let c2 = Snap('#svg').paper.text(boxHeight / 2, boxWidth / 2, item.sort)
Snap('#svg')
.paper.g(c1, c2)
.drag()
.click(function () {
vm.dealWithClickBox(item.uuid, this)
})
from snap.svg.
customDrag(ele) {
let move = function (dx, dy, x, y) {
let clientX, clientY
if (typeof dx == 'object' && dx.type == 'touchmove') {
clientX = dx.changedTouches[0].clientX
clientY = dx.changedTouches[0].clientY
dx = clientX - this.data('ox')
dy = clientY - this.data('oy')
}
this.attr({
transform: this.data('origTransform') + (this.data('origTransform') ? 'T' : 't') + [dx, dy]
})
}
let start = function (x, y, ev) {
// debugger
if (typeof x == 'object' && x.type == 'touchstart') {
x.preventDefault()
this.data('ox', x.changedTouches[0].clientX)
this.data('oy', x.changedTouches[0].clientY)
}
this.data('origTransform', this.transform().local)
}
let stop = function () {}
// pad上拖拽
ele.touchstart( start );
ele.touchmove( move );
ele.touchend( stop );
// 电脑上拖拽
ele.drag(move, start, stop)
},
from snap.svg.
Related Issues (20)
- CDNJS & jsDelivr : 0.5.1 tagged version contains 0.5.0
- Import Snap using Webpack imports-loader 2.0.0 not working HOT 1
- how to limit the draggable area in snap.svg? HOT 11
- compilation error in dist/snap.svg.js lead to es6 import error
- imports-loader rule is not compatible with [email protected] HOT 2
- Solution for using snap-svg in Vue HOT 2
- '‹'
- Memory leak when there are SVG elements with foreignObject elements
- Docs / Types: Snap.animate with array of numbers
- Add SECURITY.md HOT 1
- how to save workspace in snap.svg? HOT 1
- how to snap object to all edges while drag? HOT 1
- Upgrading targetSDK causes issues loading SVG HOT 2
- Animated clock that worked for version 0.3.0 is failing with version 0.5.1 HOT 1
- Bug on Getting Started page
- how can i config in vite project HOT 2
- how can i config in webpack5.x project
- Incorrect ssl cert expired on snapsvg.io
- SSL Cert not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from snap.svg.