版权声明:本文为博主原创文章,未经博主允许不得转载。

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');

  1. <span style="font-size:18px">divTitle.draggable().click(function ()
  2. {
  3. $(this).draggable({ disabled: false });
  4. $(this).css('backgroundColor', 'transparent');
  5. }).dblclick(function ()
  6. {
  7. $(this).draggable({ disabled: true });
  8. $(this).css('backgroundColor', '#FFFF6F');
  9. });</span>

这样控制一下就可以让div同时具有edit和drag属性了。

 

div可编辑 可拖动的更多相关文章

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

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

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

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

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

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

  4. 如何让DIV可编辑、可拖动

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

  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. asp.net异常处理和错误页配置

    最近做一个项目,直接拷贝了前辈写的程序,结果报错了查了半天都没查出原因,也看不出哪里报错,最后发现有一个错误被try...catch了,所以我们做项目的时候一般不需要try...catch. 假设所有 ...

  2. 类方法,实例方法,静态方法,@property的应用

    class test(object): h = 'hello' w = 'world' def demo(self): print("demo") def test_class(s ...

  3. MODBUS TCP和MODBUS RTU的差别

    TCP和RTU协议非常类似, MBAP Header长度共7个字节,分别为Transaction identifier(事务标识符),Protocol identifier(协议标识符),Length ...

  4. ss3

    1)执行如下命令,进行安装shadowsocks(命令需要一条条的输入,然后回车,执行完一条,在执行下一条命令),过程中可能会让你选择确认的地方,直接输入"y"回车即可: yum ...

  5. 代码,用c++实现线性链表

    #include <iostream> #include <stdio.h> #include <malloc.h> using namespace std; #d ...

  6. 请定义一个宏,比较两个数的a、b的大小,不能使用大于、小于、if语句

    请定义一个宏,比较两个数的a.b的大小,不能使用大于.小于.if语句 方法一:    #define max(a,b) ((((long)((a)-(b)))&0x80000000)?(b): ...

  7. Struts学习总结 学习

    ContextMap 包含值栈包含 root(list结构)和context(map结构)  值栈包含contextMap的引用.  Actioncontext是工具类 可以获取他们 Struts2拥 ...

  8. 应用程序无法正常启动提示错误0xc000007b 问题的原因和解决方法

    应用程序无法正常启动提示错误0xc000007b 问题的原因和解决方法 前提条件: 你使用的是VS201x软件编写程序,你使用的电脑是X64位的,并且你在使用OpenCV库.你编写的程序可以正常编译, ...

  9. JVM优化(未完)

    -XX:+PrintGC 在eclipse控制台打印简单的GC信息,与-verbose:gc一样 -verbose:gc 在eclipse控制台打印简单的GC信息 -XX:+PrintGCDetail ...

  10. 【转】WebElement.getText()为空解决方法

    WebElement.getText()为空解决方法 当使用getText()获取一个普通的链接文本时: <a href="http://www.baidu.com"> ...