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 ...
随机推荐
- 【C++ Primer 5th】Chapter 1
1. 每个C++都包含至少一个函数,其中一个必须为main函数,且 main 函数的返回类型必须为 int. 2. 函数定义包括:返回类型,函数名,形参列表,函数体 3. main 函数返回值用来指示 ...
- 使用UIVisualEffectView创建毛玻璃效果
UIVisuaEffectView :继承自UIView,可以看成是专门用于处理毛玻璃效果的视图,只要我们将这个特殊的View添加到其他视图(eg. ImageView )上面,被该UIVisuaEf ...
- java代码JFrame练习
总结: package com.da; import java.awt.Button; import java.awt.Color; import java.awt.FlowLayout; impor ...
- js基础之变量类型
1.NAN(Not a number) 不是一个数字 自身:console.log(NaN==NaN)和console.log(NaN===NaN)返回值都是false; 其他函数,isNaN()可用 ...
- Framework配置错误
转自:http://blog.csdn.net/ked/article/details/25052955 VS2012命令提示符无法使用的解决方法 打开VS2012命令提示符时报错“ERROR: Ca ...
- 51单片机的TXD、 RXD 既接了 232 又接了 485芯片 ,会导致通信失败!
51单片机的TXD. RXD 既接了 232 又接了 485 ,会导致通信失败! 下面是绘制电路板用的部分电路图: 通信现象: 1.我使用了USB-232的下载模块,把它接到P4上,发现单片机只能发送 ...
- linux上运行jmeter-server失败
1. 在linux上运行jmeter-server报如下错误 处理办法: 通过如下命令运行 ./jmeter-server -Djava.rmi.server.hostname=192.168.16. ...
- ant安装和配置
一.安装ant到官方主页http://ant.apache.org下载新版(我用的1.9.2)的ant,得到的是一个apache-ant-1.9.2-bin.zip的压缩包.将其解压到你的硬盘上,例如 ...
- 痞子衡嵌入式:恩智浦i.MX RTxxx系列MCU特性介绍(2)- RT685EVKA性能实测(Dhrystone)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的性能. 在前面的文章 i.MXRTxxx微控制器概览 里,痞子衡给大家简介过恩智浦半导体在2018 ...
- [开源]OSharpNS 步步为营系列 - 5. 添加前端Angular模块[完结]
什么是OSharp OSharpNS全称OSharp Framework with .NetStandard2.0,是一个基于.NetStandard2.0开发的一个.NetCore快速开发框架.这个 ...