如何让DIV可编辑、可拖动示例代码


Posted in Javascript onSeptember 18, 2013

1、可编辑:

<div id="move" contentEditable="true">可编辑</div>
设置contentEditable属性可以让div编程可编辑状态

2、可拖动:

$('#move').draggable();
使用jQuery UI的draggable可以让div变成可拖动状态,但是如果两个属性同时应用就会出现可编辑功能失效的状况。

3、可编辑、可拖动:

<div id="move" contentEditable="true">可编辑</div> 
var divTitle=$('#move'); 
[code] 
<span style="font-size:18px">divTitle.draggable().click(function () 
{ 
$(this).draggable({ disabled: false }); 
$(this).css('backgroundColor', 'transparent'); 
}).dblclick(function () 
{ 
$(this).draggable({ disabled: true }); 
$(this).css('backgroundColor', '#FFFF6F'); 
});</span>

这样控制一下就可以让div同时具有edit和drag属性了。
Javascript 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
jQuery extend 的简单实例
Sep 18 #Javascript
Javascript中Event属性搜集整理
Sep 17 #Javascript
js获取html文件的思路及示例
Sep 17 #Javascript
JS的Document属性和方法小结
Sep 17 #Javascript
JS画5角星方法介绍
Sep 17 #Javascript
js带按钮的提示框可供选择示例代码
Sep 17 #Javascript
今天是星期几的4种JS代码写法
Sep 17 #Javascript
You might like
dedecms中常见问题修改方法总结
2007/03/21 PHP
zend framework多模块多布局配置
2011/02/26 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
Yii分页用法实例详解
2014/12/04 PHP
php常用图片处理类
2016/03/16 PHP
PDO::query讲解
2019/01/29 PHP
javascript的函数
2007/01/31 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
Pycharm更换python解释器的方法
2018/10/29 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
Java servlet面试题
2012/03/04 面试题
通信工程专业毕业生推荐信
2013/12/25 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
单身证明格式样本
2015/06/15 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
导游词之河北邯郸
2019/09/12 职场文书