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可编辑、可拖动的更多相关文章

  1. div可编辑 可拖动

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.可编辑: <div id="move" contentEditable="true">可编 ...

  2. IOS第七天(6:UiTableView编辑模式, 拖动位置 ,滑动删除)

    **********UiTableView编辑模式, 拖动位置 ,滑动删除 #import "HMViewController.h" @interface HMViewContro ...

  3. 使DIV相对窗口大小左右拖动始终水平居中

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  4. div 可编辑--获取光标位置插入元素

    <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Language" ...

  5. div的edit和drag(点击div可编辑、删除、拖动)

    1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEdit ...

  6. 设置DIV可编辑

    <div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可 ...

  7. contenteditable="true"让div可编辑

    今天才知道有这个属性,真是out了. 不过以前一直没做编辑器有关的,毕竟开源的很多. 现在觉得开源的也不是这么好用,自己写写简单的吧 用了 <div class="content-bo ...

  8. div可编辑框,去除粘贴文字样式😄

    上个月做了个聊天的需求(网页版的).说到聊天都想到输入框,说到输入框都会想到input,但是input标签是不支持插入图片的(包括areatext标签).查阅了一些资料就看到div标签有一个属性con ...

  9. DIV可编辑后,与限制输入及光标偏移的纠葛

    前言 最近在弄个人的网站,偶然间发现DIV可以设置编辑模式,之前设计的方案在此功能上需要限制输入的长度.网上搜索了一波,综合搜索的结果,考虑使用的监听事件有:keydown .textInput .i ...

随机推荐

  1. 【安装.net framework4.0】之安装失败,“安装时发生严重错误”

    在网上查了很多资料都说改什么文件名和注册表什么的,根本没用,后来查到一篇文章,提供了下面的解决办法: 地址:<Microsoft .NET Framework 4.0安装时发生严重错误 无法安装 ...

  2. java 对象占用内存查看 以及JVM级别 方法修改等

    public interface Instrumentation 此类提供检测 Java 编程语言代码所需的服务.检测是向方法中添加字节码,以搜集各种工具所使用的数据.由于更改完全是进行添加,所以这些 ...

  3. 2016 acm香港网络赛 C题. Classrooms(贪心)

    原题网址:https://open.kattis.com/problems/classrooms Classrooms The new semester is about to begin, and ...

  4. python 文字识别 之 pytesseract

    pytesseract资源 链接:https://pan.baidu.com/s/1eTsqhsY 密码:j0yo 安装时前面一直next就可以了,直到这一步,勾选Math和Chinese,支持计算和 ...

  5. python 正則表達式推断邮箱格式是否正确

    import re def validateEmail(email):     if len(email) > 7:         if re.match("^.+\\@(\\[?) ...

  6. c语言的编译和运行流程

    C语言源程序经过编译器进行词法分析 语法分析 等过程生成中间语言(object后缀的文件)编译期间会生成一个字符表和静态分配空间(如new static 全局变量)它们所需的内存空间可以计算出来放在链 ...

  7. debian切换sh shell到bash shell

    1 安装dpkg-reconfigure命令 切换到root账户即可. 2 dpkg-reconfigure dash 选择no

  8. Residual (numerical analysis)

    In many cases, the smallness of the residual means that the approximation is close to the solution, ...

  9. POJ3094 Sky Code(莫比乌斯反演)

    POJ3094 Sky Code(莫比乌斯反演) Sky Code 题意 给你\(n\le 10^5\)个数,这些数\(\le 10^5\),问这些这些数组成的互不相同的无序四元组(a,b,c,d)使 ...

  10. linux c编程:管道

    2在前面介绍过,进程之间交换信息的唯一途径就是传送打开的文件.可以经由fork或者exec来传送.这一章将介绍新的进程共享方式 每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都 ...