如何让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代码
Mar 06 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
清空上传控件input file的值
Jul 03 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
记录一次websocket封装的过程
Nov 23 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
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
phplot生成图片类用法详解
2015/01/06 PHP
php实现cookie加密的方法
2015/03/10 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
python选择排序算法实例总结
2015/07/01 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
班级德育工作实施方案
2014/02/21 职场文书
企业员工培训感言
2014/02/26 职场文书
司法建议书范文
2014/05/13 职场文书
企业党员个人自我评价
2014/09/20 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书