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可编辑 可拖动的更多相关文章
- 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可编辑、可拖动
1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEdit ...
- 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 ...
随机推荐
- CSS之EM相对单位
之前以为em单位只是在font-size中起到继承作用, 后来慢慢觉得,继承,应该是在几乎所有样式中都可以是实现的,比如height,width,border... 今天才简单测试了下,果真是可以实现 ...
- TFS自定义开发中的反射应用
最近CM(Configuration Management) 的同事在自定义开发TFS的过程中遇到一个问题. 领导要求快速开发一个工具, 可以自动连接TFS,然后自动Check out一些word文件 ...
- 问题5:如何快速找到多个字典中的公共键(key)
方法一:for in循环 from random import randint, sample a1 = {k; randint(1, 4) for k in 'abcdefg'} a2 = {k; ...
- web攻击之九:其它
四.身份认证和会话 [攻击] 黑客在浏览器中停用JS,防止客户端校验,从而进行某些操作. [防御] 1.隐藏敏感信息. 2.对敏感信息进行加密. 3.session 定期失效 五.权限与访问控制 [攻 ...
- 模拟Spring中applicationContext.xml配置文件初始化bean的过程
package com.xiaohao.action; import java.io.File; import java.lang.reflect.Method; import java.util.C ...
- Debain install Jupyter
1. install Anaconda https://www.anaconda.com/download/#linux 2. config jupyter $ ipython from notebo ...
- sql server 表索引碎片处理
DBCC SHOWCONTIG (Transact-SQL) SQL Server 2005 其他版本 更新日期: 2007 年 9 月 15 日 显示指定的表或视图的数据和索引的碎片信息. 重要提示 ...
- 关于web中注册倒数的问题(亲测)
<title></title> <script type="text/javascript"> var leftSecond ...
- Java探索之旅(18)——多线程(2)
1 线程协调 目的对各线程进行控制,保证各自执行的任务有条不紊且有序并行计算.尤其是在共享资源或者数据情况下. 1.1 易变volatile cache技术虽然提高了访问数据的效率,但是有可能导致主存 ...
- C++之vector模板类
vector 称为容器模板类,是同一种类型的对象的集合,每个对象都有一个对应的整数索引值.vector 不是一种数据类型,而只是一个类模板,可用来定义任意多种数据类型.vector 类型的每一种都指定 ...