如何让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 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
express express-session的使用小结
Dec 12 Javascript
json 带斜杠时如何解析的实现
Aug 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
无线电广播的开始
2002/01/30 无线电
PHP 中的批处理的实现
2007/06/14 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
露营世界:Camping World
2017/02/02 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
保护地球的标语
2014/06/17 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技