Jquery Tdrag拖動外掛,拖動的div內有input或者select元素,元素內無法編輯或下拉問題解決
阿新 • • 發佈：2019-02-15
專案中需要點選一個按鈕,彈出一個對話方塊,由於對話方塊尺寸很大,顯示了很多東西,其實就是div設定了隱藏和顯示,所以為了讓低解析度的電腦也能方便的檢視內容,就想到能否有外掛支援拖動彈出的div,很幸運,前輩們已經有很多外掛,找到一款Tdrag,很好用,連結如下,使用也超級簡單:
只需要匯入jquery和Tdrag的js就可以初始化進行使用,一般的需求,這樣其實效果已經達到了,但是,如果你的div裡面有input或者select下拉列表,你會發現,雖然能拖動div,但你的input輸入編輯不了,select也下拉點選不了,看來得找原始碼,看到了Tdrag.js的83行,有一個return false,修改成return true,就可以解決,如下:
原來是這裡的問題,猜測是return false,阻止了事件傳播,導致input或者select無法獲得點選事件,將return false改成return true成功解決,很高興記錄一下這個問題,有問題可以交流.
//2018年7月27日17:32:08
還有一個問題,如果你的拖動div內,有很多input的元素,這個時候如果允許拖動任意位置的話,就會導致input裡面無法選中或者複製黏貼,需要設定一下範圍,如下:
拖拽塊內指定區域
html程式碼:
|
1 2 3 4 5 |
>
|
js程式碼:
|
|