如何让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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
js读取本地文件的实例
2017/12/22 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
小程序云开发实战小结
2018/10/25 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
python处理cookie详解
2014/02/07 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python装饰器用法实例总结
2018/02/07 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
学校周年庆活动方案
2014/08/22 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
开学典礼校长致辞
2015/07/29 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
党员心得体会范文2016
2016/01/23 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android