如何让DIV可编辑、可拖动
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');
<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属性了。
如何让DIV可编辑、可拖动的更多相关文章
- div可编辑 可拖动
版权声明:本文为博主原创文章,未经博主允许不得转载. 1.可编辑: <div id="move" contentEditable="true">可编 ...
- IOS第七天(6:UiTableView编辑模式, 拖动位置 ,滑动删除)
**********UiTableView编辑模式, 拖动位置 ,滑动删除 #import "HMViewController.h" @interface HMViewContro ...
- 使DIV相对窗口大小左右拖动始终水平居中
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- div 可编辑--获取光标位置插入元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Language" ...
- div的edit和drag(点击div可编辑、删除、拖动)
1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEdit ...
- 设置DIV可编辑
<div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可 ...
- contenteditable="true"让div可编辑
今天才知道有这个属性,真是out了. 不过以前一直没做编辑器有关的,毕竟开源的很多. 现在觉得开源的也不是这么好用,自己写写简单的吧 用了 <div class="content-bo ...
- div可编辑框,去除粘贴文字样式😄
上个月做了个聊天的需求(网页版的).说到聊天都想到输入框,说到输入框都会想到input,但是input标签是不支持插入图片的(包括areatext标签).查阅了一些资料就看到div标签有一个属性con ...
- DIV可编辑后,与限制输入及光标偏移的纠葛
前言 最近在弄个人的网站,偶然间发现DIV可以设置编辑模式,之前设计的方案在此功能上需要限制输入的长度.网上搜索了一波,综合搜索的结果,考虑使用的监听事件有:keydown .textInput .i ...
随机推荐
- RocketMQ 4.3正式发布,支持分布式事务
冯嘉 作者 | 冯嘉 近日,Apache RocketMQ 4.3 版本宣布发布,此次发布不仅包括提升性能,减少内存使用等原有特性增强,还修复了部分社区提出的若干问题,更重要的是该版本开源了社 ...
- django模板加载静态资源
1. 目录结构 /mysite/setting.py部分配置: # Django settings for mysite project. import os.path TEMPLATE_DIRS = ...
- Linux删除乱码文件的方法
当文件名为乱码的时候,无法通过键盘输入文件名,所以在终端下就不能直接利用rm,mv等命令管理文件了. 我们可以通过以下几种方法删除linux下的乱码文件.(文件名为乱码) l 方法1 我们知道每个文 ...
- Linux 技巧:让进程在后台运行的可靠方法
原文链接:http://www.ibm.com/developerworks/cn/linux/l-cn-nohup/ 想让进程在断开连接后依然保持运行?如果该进程已经开始运行了该如何补救? 如果有大 ...
- 【很强大的Android图表引擎 - AChartSDK】
在手机移动App开发中,图表在app中越来越占领举足轻重的地图.而在Android领域.AchartEngine 图表引擎可谓无人不知无人不晓. 可是今天就给各位推荐更为强大的图表引擎. 为什么说更为 ...
- Node-Webkit - package.json - 参数设置
必填: main :(string)APP的主入口,指定一个html文件,如:main:"index.htm". name :(string)APP的名称,必须具有唯一性. 例子: ...
- 第8章 Foundation Kit介绍
本文转载至 http://blog.csdn.net/mouyong/article/details/16947321 Objective-C是一门非常精巧实用的语言,目前我们还没有研究完它提供的全 ...
- J - Max Sum
J - Max Sum Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Descrip ...
- [转]React表单无法输入原因----约束性和非约束性组件
转自:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...
- Frobenius inner product
https://en.wikipedia.org/wiki/Frobenius_inner_product Frobenius norm