如何让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开发技术大全-第1章javascript概述
Jul 03 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
javascript元素动态创建实现方法
May 13 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
vue项目中实现的微信分享功能示例
Jan 21 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
如何基于python操作excel并获取内容
2019/12/24 Python
pytorch 修改预训练model实例
2020/01/18 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
应届大学生自荐信
2013/12/05 职场文书
门卫岗位安全职责
2013/12/13 职场文书
土建资料员岗位职责
2014/01/04 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
民政局未婚证明
2015/06/15 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
2015年国庆节寄语
2015/08/17 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python