如何让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 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python实现根据文件格式分类
2019/10/31 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
见习期自我鉴定
2013/11/07 职场文书
普通院校学生的自荐信
2013/11/27 职场文书
员工考核管理制度
2014/02/02 职场文书
国际贸易求职信
2014/07/05 职场文书
商务经理岗位职责
2014/08/03 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL