如何让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 ...
随机推荐
- PHP 使用 GeoLiteCity 库解析 IP 为地理位置
关于把 IP 地址转换为地理位置可以使用网络上很多的 API,好处就是不用在本地存储一个 IP 数据库,而且一般网络上的 IP 库会自动更新,不利的地方就是太依赖于网络,性能表现也可能会弱些.比如像下 ...
- git 和 svn 的比较
Git VS SVN 1 .功能 主体功能 Git SVN 1.从服务器上克隆完整的Git仓库(包括代码和版本信息)到单机上. 1 .SVN是基于关系数据库的(BerkleyDB)或一系列二进制 ...
- 【JMeter4.0学习(四)】之JMeter对JMS性能测试脚本开发
目录: 安装ActiveMQ并启动服务 JMeter对JMS点到点测试计划 JMeter JMS主题测试计划 附:相关学习地址 一.ActiveMQ官方下载地址:http://activemq.apa ...
- hihoCoder #1321 : 搜索五•数独 (Dancing Links ,精确覆盖)
hiho一下第102周的题目. 原题地址:http://hihocoder.com/problemset/problem/1321 题意:输入一个9*9数独矩阵,0表示没填的空位,输出这个数独的答案. ...
- TP5.0中的小知识总结
2017年6月26日15:01:231.input 获取输入数据 支持默认值和过滤:接收用户在前台输入的数据,可以是get方式也可以是post方式.2.ThinkPHP5.0内置了分页实现,要给 ...
- LR测试HTTPS
从浏览器里导出cer证书 保存好后, 下载openssl-1.0.1s安装好openssl之后,进入openssl目录: 输入openssl命令,即进入命令模式: 先将要转换的cer证书也放到open ...
- 【BZOJ4537】[Hnoi2016]最小公倍数 分块
[BZOJ4537][Hnoi2016]最小公倍数 Description 给定一张N个顶点M条边的无向图(顶点编号为1,2,…,n),每条边上带有权值.所有权值都可以分解成2^a*3^b的形式.现在 ...
- EasyNVR无插件直播服务器软件览器低延时播放监控摄像头视频(EasyNVR播放FLV视频流)
背景描述 EasyNVR的使用者应该都是清楚的了解到,EasyNVR一个强大的功能就是可以进行全平台的无插件直播.主要原因在于rtsp协议的视频流(默认是需要插件才可以播放的)经由EasyNVR处理可 ...
- StackOverflow&&Quora&&More 翻译系列——目录
启动了一个翻译系列,主要收录个人在伯乐在线上翻译的文章,或者在 StackOverflow.Quora 及其他资讯站上发现的好文,选文比较偏个人喜好.希望能够学习.理解文章的同时提高英语水平,并共享知 ...
- linux c编程:进程控制(二)_竞争条件
前面介绍了父子进程,如果当多个进程企图对共享数据进行处理.而最后的结果又取决于进程运行的顺序时,就认为发生了竞争关系.通过下面的例子来看下 在这里标准输出被设置为不带缓冲的,于是父子进程每输出一个字符 ...