cropboxタッチイベントについて

クリッピングプラグインにタッチイベントを追加したのですが、なにか動きが
ぎこちないです。
修正点や改善策をお教えいただけたらと思います。

-補足-

タッチしたポイントに追従して画像がスクロールされませんので、追従するようにしたいです。

html
1				<div class="container">
2					<input type="checkbox" id="rotaCheck3">
3					<input type="hidden" id="image3" class="image" name="image" value="">
4					<div class="wrap">
5						<div class="cropped1" id="cropped3"></div>
6						<p>表面</p>
7					</div>
8					<div class="selectOrDelete">
9						<label class="modal-open" id="modal-open3" for="file3">画像を選択</label>
10						<button type="button"  onclick="clearValue3();" class="delete">削除</button>
11					</div>
12					<div class="modal-content" id="modal-content3">
13						<h2>画像の位置とサイズを変更<span class="modal-close">×</span></h2>
14						<div class="imageBox" id="imageBox3">
15							<div class="wrap2">
16								<div class="thumbBox" id="thumbBox3"></div>
17								<div class="rotaSquare" id="rotaSquare3"></div>
18							</div>
19							<div class="spinner" id="spinner3"></div>
20						</div>
21						<div class="action">
22							<input type="file" id="file3" name="clipImage">
23							<label class="reChoice" id="reChoice3" for="file3">画像を選択</label>
24							<button type="button" class="modal-close" id="modal-close3">キャンセル</button>
25							<button type="button" id="btnZoomIn3" class="btnZoomIn"> <img src="img/zoomIn.svg"> </button>
26							<button type="button" id="btnZoomOut3" class="btnZoomOut"> <img src="img/zoomOut.svg"> </button>
27							<label for="rotaCheck3" id="btnRotation3" class="rotaCheckLabel btnRotation"><img src="img/rotation.svg"></label>
28							<button type="button" id="btnCrop3" class="btnCrop">適用</button>
29						</div>
30					</div>
31				</div>

js
1window.onload = function() {
2        var options =
3        {
4            imageBox: '#imageBox1',
5            thumbBox: '#thumbBox1',
6            spinner: '#spinner1',
7            imgSrc: 'avatar.png'
8}

cropbox.js
1var cropbox1 = function(options){
2    var el = document.querySelector(options.imageBox),
3    obj =
4    {
5        state : {},
6        ratio : 1,
7		touchmove_bar : 0,
8		touchstart_bar : 0,
9        options : options,
10        imageBox : el,
11        thumbBox : el.querySelector(options.thumbBox),
12        spinner : el.querySelector(options.spinner),
13        image : new Image(),
14        getDataURL: function ()
15        {
16            var width = this.thumbBox.clientWidth,
17                height = this.thumbBox.clientHeight,
18                canvas = document.createElement("canvas"),
19                dim = el.style.backgroundPosition.split(' '),
20                size = el.style.backgroundSize.split(' '),
21                dx = parseInt(dim[0]) - el.clientWidth/2 + width/2,
22                dy = parseInt(dim[1]) - el.clientHeight/2 + height/2,
23                dw = parseInt(size[0]),
24                dh = parseInt(size[1]),
25                sh = parseInt(this.image.height),
26                sw = parseInt(this.image.width);
27 
28            canvas.width = width;
29            canvas.height = height;
30            var context = canvas.getContext("2d");
31            context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
32            var imageData = canvas.toDataURL('image/png');
33            return imageData;
34        },
35        getBlob: function()
36        {
37            var imageData = this.getDataURL();
38            var b64 = imageData.replace('data:image/png;base64,','');
39            var binary = atob(b64);
40            var array = [];
41            for (var i = 0; i < binary.length; i++) {
42                array.push(binary.charCodeAt(i));
43            }
44            return  new Blob([new Uint8Array(array)], {type: 'image/png'});
45        },
46        zoomIn: function ()
47        {
48            this.ratio*=1.1;
49            setBackground();
50        },
51        zoomOut: function ()
52        {
53            this.ratio*=0.9;
54            setBackground();
55        },
56		imgTouch: function ()
57		{
58			setBackground();
59		}
60    },
61    attachEvent = function(node, event, cb)
62    {
63        if (node.attachEvent)
64            node.attachEvent('on'+event, cb);
65        else if (node.addEventListener)
66            node.addEventListener(event, cb);
67    },
68    detachEvent = function(node, event, cb)
69    {
70        if(node.detachEvent) {
71            node.detachEvent('on'+event, cb);
72        }
73        else if(node.removeEventListener) {
74            node.removeEventListener(event, render);
75        }
76    },
77    stopEvent = function (e) {
78        if(window.event) e.cancelBubble = true;
79        else e.stopImmediatePropagation();
80    },
81    setBackground = function()
82    {
83        var w =  parseInt(obj.image.width)*obj.ratio;
84        var h =  parseInt(obj.image.height)*obj.ratio;
85 
86        var pw = (el.clientWidth - w) / 2;
87        var ph = (el.clientHeight - h) / 2;
88 
89        el.setAttribute('style',
90                'background-image: url(' + obj.image.src + '); ' +
91                'background-size: ' + w +'px ' + h + 'px; ' +
92                'background-position: ' + pw + 'px ' + ph + 'px; ' +
93                'background-repeat: no-repeat');
94    },
95    imgMouseDown = function(e)
96    {
97        stopEvent(e);
98 
99        obj.state.dragable = true;
100        obj.state.mouseX = e.clientX;
101        obj.state.mouseY = e.clientY;
102    },
103    imgMouseMove = function(e)
104    {
105        stopEvent(e);
106 
107        if (obj.state.dragable)
108        {
109            var x = e.clientX - obj.state.mouseX;
110            var y = e.clientY - obj.state.mouseY;
111 
112            var bg = el.style.backgroundPosition.split(' ');
113 
114            var bgX = x + parseInt(bg[0]);
115            var bgY = y + parseInt(bg[1]);
116 
117            el.style.backgroundPosition = bgX +'px ' + bgY + 'px';
118 
119            obj.state.mouseX = e.clientX;
120            obj.state.mouseY = e.clientY;
121        }
122    },
123    imgMouseUp = function(e)
124    {
125        stopEvent(e);
126        obj.state.dragable = false;
127    },
128    zoomImage = function(e)
129    {
130        var evt=window.event || e;
131        var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta;
132        delta > -120 ? obj.ratio*=1.1 : obj.ratio*=0.9;
133        setBackground();
134    },
135	//ここからtouchIvent
136imgTouchstart = function(e){
137    if(e.touches.length > 1){
138    }
139    else{
140        stopEvent(e);
141        obj.state.dragable = true;
142        obj.state.mouseX = e.touches[0].pageX;
143        obj.state.mouseY = e.touches[0].pageY;
144    }
145},
146imgTouchmove = function(e){
147    if(e.touches.length > 1){
148    }
149    else{
150        stopEvent(e);
151        if (obj.state.dragable){
152            var x = e.touches[0].pageX - obj.state.mouseX;
153            var y = e.touches[0].pageY - obj.state.mouseY;
154            var bg = el.style.backgroundPosition.split(' ');
155            var bgX = x + parseInt(bg[0]);
156            var bgY = y + parseInt(bg[1]);
157            el.style.backgroundPosition = bgX +'px ' + bgY + 'px';
158            obj.state.mouseX = e.touches[0].pageX;
159            obj.state.mouseY = e.touches[0].pageY;
160        }
161    }
162},
163imgTouchend = function(e){
164    if(e.touches.length == 1){
165         stopEvent(e);
166         obj.state.dragable = false;
167    }
168}
169 //ここまで
170    obj.spinner.style.display = 'block';
171    obj.image.onload = function() {
172        obj.spinner.style.display = 'none';
173        setBackground();
174 
175        attachEvent(el, 'mousedown', imgMouseDown);
176        attachEvent(el, 'mousemove', imgMouseMove);
177        attachEvent(document.body, 'mouseup', imgMouseUp);
178        var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
179        attachEvent(el, mousewheel, zoomImage);
180		attachEvent(el, 'touchstart', imgTouchstart,false);
181		attachEvent(el, 'touchmove', imgTouchmove);
182		attachEvent(el, 'touchend', imgTouchend);
183    };
184    obj.image.src = options.imgSrc;
185    attachEvent(el, 'DOMNodeRemoved', function(){detachEvent(document.body, 'DOMNodeRemoved', imgMouseUp)});
186 
187    return obj;
188};

m.ts10806

2017/08/28 00:48

「ぎこちない」では伝わらない部分があると思います。具体的に「○○のようになるはず（なってほしい）が、××のようになってしまう」といった形で表現をお願いします。

行動規範の内容に同意します

回答1件

自己解決

１秒以内のタップにおけるイベントをストップすることでスムーズな動きを実現しました。
原因はよくわかりませんでしたが。一応解決といたします。

javascript
1$(function() {
2  var touched = false;
3  var touch_time = 0;
4  $(".imageBox , .imageBox2").bind({
5    'touchstart': function(e) {
6      touched = true;
7      touch_time = 0;
8      document.interval = setInterval(function(){
9        touch_time += 100;
10        if (touch_time == 1000) {
11
12        }
13      }, 100)
14      e.preventDefault();
15    },
16    'touchend': function(e) { 
17      if (touched) {
18        if (touch_time < 1000 ) {
19       event.stopPropagation();        }
20      }
21      touched = false;
22      clearInterval(document.interval);
23      e.preventDefault();
24    }
25  });
26});