如何让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 继承详解 第一篇
Aug 30 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
Vue父子组件之间的通信实例详解
Sep 28 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中DOMElement操作xml文档实例演示
2013/03/26 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
详解Python中的条件判断语句
2015/05/14 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python如何爬取个性签名
2018/06/19 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
通过代码实例了解Python sys模块
2020/09/14 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
营业员演讲稿
2013/12/30 职场文书
挂职思想汇报
2013/12/31 职场文书
秋菊打官司观后感
2015/06/03 职场文书
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers