如何让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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
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
扩展你的 PHP 之入门篇
2006/12/04 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
js特殊字符转义介绍
2013/11/05 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
python逆序打印各位数字的方法
2018/06/25 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
大学生社会实践自我鉴定
2014/03/24 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
学术会议通知范文
2015/04/15 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
会议室使用管理制度
2015/08/06 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis