網頁版 拖拉功能 建議修正方式

網頁好讀版: https://hackmd.atelli.ai/s/9_siI9txf

目前網頁版的地圖與血量狀態可拖拉
但只要拖拉速度過快、拖拉至視窗外
或將地圖與血量拖拉再一起 就會難以再次拖拉

建議如以下修正
檔案 ps.js

1. 將 15行 dragging function 修改如下
```javascript
var dragging = function(e) {
if (isDragging) {
ob = $('.dragging')
var deltaX = e.clientX - startDraggingX;
var deltaY = e.clientY - startDraggingY;
ob.css({
left: (startDraggingPosX + deltaX) + "px",
top: (startDraggingPosY + deltaY) + "px",
});
}
}
```

原因：
原始檔案可以看見 29行 dragStart function 已經決定正在拖拉的元素為何
並定義當前為 isDragging = true, 並將之新增class dragging

而 15行 dragging function
卻未重新檢查isDragging是否為true
並重新定義正在拖拉的元素為何
所以導致拖拉太快，拖拉出視窗，拖拉至重疊會出現bug
所以我將dragging先檢查isDragging
並直接抓取$('.dragging')元素

2. 同理 將 47行 dragEnd 修改如下

```javascript
var dragEnd = function(e) {
if (isDragging) {
ob = $('.dragging')
ob.removeClass("dragging");
isDragging = false;
ob.css({
opacity: 1
});
}
}
```

3. 將167行 原本的 j('#map-container,#hp-container').on('mouseup', dragEnd);
修改如下

```javascript
j('body').on('mouseup', dragEnd);
```

原因：因為滑鼠移太快時，mouseup的當下若不在可拖拉的元素上，變成無法停止可拖拉狀態
所以mouseup應改為對整個body偵測

4. 30行 var dragStart = function(e) {處 底下，
進入function時的第一行新增檢查 if (!isDragging) {
如下：
var dragStart = function(e) {
if (!isDragging) {
// ... 原版的程式
}
}
原因：避免同時拖拉兩個元素

網頁好讀版: https://hackmd.atelli.ai/s/9_siI9txf