如何让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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
js 目录列举函数
Nov 06 Javascript
JavaScript Prototype对象
Jan 07 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
微信小程序云开发使用方法新手初体验
May 16 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 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中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
js倒计时抢购实例
2015/12/20 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
vue组件学习教程
2017/09/09 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
python解析yaml文件过程详解
2019/08/30 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
python super的使用方法及实例详解
2019/09/25 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
法制宣传口号
2014/06/16 职场文书
节水口号标语
2014/06/19 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
小学假期安全广播稿
2014/09/28 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
springboot读取nacos配置文件
2022/05/20 Java/Android
postgresql中如何执行sql文件
2023/05/08 PostgreSQL