如何让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中面向对象技术的模拟
Sep 25 Javascript
input按钮的事件处理大全
Dec 10 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 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编程与应用
2006/10/09 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
php生成HTML文件的类方法
2019/10/11 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
node.js基础知识小结
2018/02/26 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
大学生期末自我鉴定
2014/02/01 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
泰坦尼克号观后感
2015/06/04 职场文书