如何让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的gzip静态压缩方法
Jan 05 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
vue实现微信分享功能
2018/11/28 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
中软国际Java程序员笔试题
2014/07/19 面试题
机械系大学毕业生推荐信
2013/11/27 职场文书
大学生社团活动总结
2014/04/26 职场文书
写给女朋友的保证书
2015/05/09 职场文书
中学总务处工作总结
2015/08/12 职场文书
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers