Jquery Tdrag拖动插件,拖动的div内有input或者select元素,元素内无法编辑或下拉问题解决

    项目中需要点击一个按钮,弹出一个对话框,由于对话框尺寸很大,显示了很多东西,其实就是div设置了隐藏和显示,所以为了让低分辨率的电脑也能方便的查看内容,就想到能否有插件支持拖动弹出的div,很幸运,前辈们已经有很多插件,找到一款Tdrag,很好用,链接如下,使用也超级简单:

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

<div class="boxList">     <div class="one div6">         <div class="title">title</div>     </div> </div>

js代码:

$(".div6").Tdrag({     scope:".boxList",     handle:".title" });