如何让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里使用Dom操作Xml
Jan 22 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
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的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
几种tab切换详解
2017/02/03 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python smtplib实现发送邮件功能
2018/05/22 Python
python样条插值的实现代码
2018/12/17 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
原料仓仓管员岗位职责
2014/07/08 职场文书
见义勇为事迹材料
2014/12/24 职场文书
个人自荐书范文
2015/03/09 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书