如何让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 05 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
基于JSON数据格式详解
Aug 31 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 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
set_include_path在win和linux下的区别
2008/01/10 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
jquery 选择器部分整理
2009/10/28 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Django rest framework实现分页的示例
2018/05/24 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
对python周期性定时器的示例详解
2019/02/19 Python
Python多项式回归的实现方法
2019/03/11 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
优秀的计算机专业求职信范文
2013/12/27 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
Windows server 2012搭建FTP服务器
2022/04/29 Servers