Element.limitDrag(…) { x: 0, //svg 初始x y: 0, //svg 初始y minx: 0, //最小x miny: 0, //最小y maxx: 100, //最大x maxy: 100 //最大y }
直接复制标签到引入snap插件下方即可使用
<script> (function () { Snap.plugin(function (Snap, Element, Paper, global) { Element.prototype.limitDrag = function (params) { this.data('minx', params.minx); this.data('miny', params.miny); this.data('maxx', params.maxx); this.data('maxy', params.maxy); this.data('x', params.x); this.data('y', params.y); this.data('ibb', this.getBBox()); this.data('ot', this.transform().local); this.drag(limitMoveDrag, limitStartDrag); return this; }; function limitMoveDrag(dx, dy) { var tdx, tdy; var sInvMatrix = this .transform() .globalMatrix .invert(); sInvMatrix.e = sInvMatrix.f = 0; tdx = sInvMatrix.x(dx, dy); tdy = sInvMatrix.y(dx, dy); this.data('x', + this.data('ox') + tdx); this.data('y', + this.data('oy') + tdy); if (this.data('x') > this.data('maxx') - this.data('ibb').width) { this.data('x', this.data('maxx') - this.data('ibb').width) }; if (this.data('y') > this.data('maxy') - this.data('ibb').height) { this.data('y', this.data('maxy') - this.data('ibb').height) }; if (this.data('x') < this.data('minx')) { this.data('x', this.data('minx')) }; if (this.data('y') < this.data('miny')) { this.data('y', this.data('miny')) }; this.transform(this.data('ot') + "t" + [this.data('x'), this.data('y')]); }; function limitStartDrag(x, y, ev) { this.data('ox', this.data('x')); this.data('oy', this.data('y')); }; }); })() </script>