Javascript 无法从可拖动的可编辑DIV中选择文本
我用构建了一个可拖动的网格,并遇到了一个问题,即我的可编辑div在其中不可编辑,因为gridster.js覆盖了Javascript 无法从可拖动的可编辑DIV中选择文本,javascript,jquery,contenteditable,jsfiddle,gridster,Javascript,Jquery,Contenteditable,Jsfiddle,Gridster,我用构建了一个可拖动的网格,并遇到了一个问题,即我的可编辑div在其中不可编辑,因为gridster.js覆盖了click事件。我找到了一个解决方案,当我点击DIV时,我可以手动触发focus()函数,现在这个DIV中的文本可以更改,但是不可选择(不能使用鼠标或键盘) 你知道这种行为的原因吗?我用我的代码做了一个JSFiddle-> HTML看起来像: <div class="gridster" id="frame" style="border:1px solid #cecece;">
click
事件。我找到了一个解决方案,当我点击DIV时,我可以手动触发focus()
函数,现在这个DIV中的文本可以更改,但是不可选择(不能使用鼠标或键盘)
你知道这种行为的原因吗?我用我的代码做了一个JSFiddle->
HTML看起来像:
<div class="gridster" id="frame" style="border:1px solid #cecece;">
<ul>
<li class="widget" data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<div id="testID">Test 1</div>
<div class="drag-handle">HAND</div>
</li>
<li class="widget" data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<div>Test 2</div>
<div class="drag-handle">HAND</div>
</li>
</ul>
</div>
$(document).ready(function() {
var gridster = $(".gridster ul").gridster({
max_cols: 2,
widget_margins: [10, 2],
widget_base_dimensions: [140, 40],
resize: {
enabled: true,
axes: ['x']
},
draggable: {
handle: '.drag-handle'
}
}).data('gridster');
$("#testID").click(function(){
gridster.disable();
$(this).attr("contenteditable","true");
$(this).focus();
})
.blur(function(){
gridster.enable();
});
});
发现了问题。问题是
调整大小
功能。因此,解决方案不仅是在用户单击时打开draggable()功能,还应该关闭resize
功能
关闭:
gridster.disable().resize_disable();
打开:
gridster.enable().resize_enable();
现在,当用户双击字段时,我也完成了可编辑
任务,因为这是一个更好的解决方案,错误行为更少