Coder Social home page Coder Social logo

Comments (2)

qiuliang1108 avatar qiuliang1108 commented on August 11, 2024

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.

qiuliang1108 avatar qiuliang1108 commented on August 11, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.