如何让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 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 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
搜索引擎技术核心揭密
2006/10/09 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
javascript比较文档位置
2008/04/08 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
JAVA中运算符的分类及举例
2015/09/12 面试题
会议开场欢迎词
2014/01/15 职场文书
中华魂演讲稿
2014/05/13 职场文书
项目经理任命书内容
2014/06/06 职场文书
新闻传播专业求职信
2014/07/22 职场文书
个人年度总结报告
2015/03/09 职场文书
获奖感言范文
2015/07/31 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书