如何让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编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
ExpressJS入门实例
Jan 14 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
JS原型与继承操作示例
May 09 Javascript
Vue常用的全选/反选的示例代码
Feb 19 Javascript
vant 中van-list的用法说明
Nov 11 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操作MongoDB的技术总结
2013/06/02 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
基本DOM节点操作
2017/01/17 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
python fabric实现远程部署
2017/01/05 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
Python实现快速排序的方法详解
2019/10/25 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
Python3 集合set入门基础
2020/02/10 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
行政经理的岗位职责
2013/11/23 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
高级工程师英文求职信
2014/03/19 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书