jQuery UI的那些坑

最新推荐文章于 2024-12-11 20:51:44 发布

折纸成鸢。

最新推荐文章于 2024-12-11 20:51:44 发布

阅读量613

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 jQuery UI

本文链接：https://blog.youkuaiyun.com/qq_26679989/article/details/89957795

前端同时被 2 个专栏收录

41 篇文章

订阅专栏

jQuery UI

2 篇文章

订阅专栏

博客主要围绕前端开发问题展开。一是contenteditable、draggable与resizable属性同时应用失效，解决方案为添加contenteditable时销毁draggable和resizable或禁用；二是div contenteditable编辑状态光标置后；三是jQueryUI draggable + sortable存在bug，jQuery UI - v1.12.1 - 2016-09-14以上版本可修复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.contenteditable属性与draggable与resizable同时应用失效问题解决方案

1、添加contenteditable属性时直接销毁draggable和resizable
2、禁用

$("id名").draggable().resizable().click(function(){
	$(this).draggable({disabled:false});
}).dblclick({
$(this).attr("contenteditable",true);
$(this).draggable({disabled:true});
});

2.div contenteditable 编辑状态光标置后

<div class="contenteditable" contenteditable="false">contenteditable<.div>
function setCursorToEnd(ele){
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    ele.focus();
  }
//  1、在调用此方法前先聚焦
var that = $(".contenteditable");
that.focus();
setCursorToEnd(that.get(0));