拖曳效果

html css jquery javascript

atoz 2023-03-29 20:48:37 ‧ 1351 瀏覽

分享至

目前在做一個拖曳效果，
因為背景及拉軸都是圖片，所以用jquery draggable操作橫向拖曳，類似input，
但拖曳完之後在按下下方按鈕時，
想要透過拖曳到不同的位置去判斷，
然後跳出不同的跳窗，想請問js該怎麼寫才能順利判斷？

greenriver iT邦研究生 5 級 ‧ 2023-03-30 08:13:37 檢舉

用隱藏的
<input type="radio">
放在點的上面，比較簡單?

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

nick_123

iT邦新手 5 級 ‧ 2023-03-30 14:51:38

http://jsbin.com/zurisiz/1/edit?html,css,output

這個應該是你想要的效果。

回應
分享
檢舉

登入發表回應

貓虎皮

iT邦新手 3 級 ‧ 2023-04-01 21:12:35

如果要使用原code而不改為其他做法的話，您可以使用以下函式：

function draggableDot_getValue(element/*draggable element*/, num/*index num*/ = 4, dragDirection/*drag direction*/ = 'horizontal'){
    num = parseInt(num);
    var dDIndex = ['horizontal', 'vertical'].indexOf(dragDirection), value = 0;
    if(dDIndex === undefined){return;}
    value = element[['offsetLeft', 'offsetTop'][dDIndex]] + element[['offsetWidth', 'offsetHeight'][dDIndex]]/2;
    // console.log(value, element.offsetParent[['offsetWidth', 'offsetHeight'][dDIndex]]);
    value /= element.offsetParent[['offsetWidth', 'offsetHeight'][dDIndex]];
    value *= (num-1);
    return(Math.round(value));
}

此函式須傳入「可拖曳元素本身」、「有幾個直」、「移動方向」三個參數，
且其將回傳值為該可拖曳元素位置髓對應到的index，
而dragDirection參數下錯時則會回傳undefined。

因為無法直接看到您的程式碼，所以只能盡我所能去猜測您所需要的功能。
希望有幫助到您=^w^=