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

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. Nested loops、Hash join、Sort merge join(三种连接类型原理、使用要点)

    nested loop 嵌套循环(原理):oracle从较小结果集(驱动表.也可以被称为outer)中读取一行,然后和较大结果集(被侦查表,也可以叫做inner)中的所有数据逐条进行比较(也是等值连接 ...

  2. Swift错误处理

    相对于可选中运用值的存在与缺失来表达函数的成功与失败,错误处理可以推断失败的原因,并传播至程序的其他部分. throws关键词 一个函数可以通过在声明中添加throws关键词来抛出错误消息. func ...

  3. spring IOC 注解@Autowired

    自动装配:按照类型来找 会在xml中找类型一样的, 比如 setMessage(SetName setName)上面有@Autowired,会到xml中找<bean id="setna ...

  4. POJ3087(模拟)

    #include"iostream" #include"string" #include"map" using namespace std; ...

  5. Webpack 基础使用

    使用webstorm编译: 1.新建一个工程(最基本的工程) 2.在webstorm的控制台,使用命令行     cnpm install webpack  -g  全局安装 3.安装完后,可以使用 ...

  6. Oracle数据库安全性设计

    一.什么是安全的系统 安全性建设是一个长期并且卓绝的工作.作为一个符合标准的企业级系统,我们认为税务系统应该具备以下的安全性特点: ◆高可用性 ◆对敏感数据的访问控制能力. ◆监测用户行为的审计能力. ...

  7. ng2 中的全屏与退出全屏

    1.进入全屏 launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el ...

  8. 菜鸟学Nhibernate 之路---(1)

    首先说一下我为什么要学这个Nhibernate,现在在公司做项目后台的逻辑层都是用动软生成的简单三层,搞来搞去都是这些东西,代码冗余量很大,每个类方法基本上都一样,真是纯正的码农,虽然后来我也尝试使用 ...

  9. 菜鸟级的Git与GitHub使用总结(转)

    菜鸟级的Git与GitHub使用总结 原创 2016年12月01日 14:58:30 1792 前言 这几天一直在折腾学习Git和GitHub的使用.几天下来,在网上查阅了大量的资料,总算有一些成果. ...

  10. Learning Python 003 缩进

    Python 缩进 Python的代码中不使用{}大括号来来表示一个代码块,而是使用缩进方式.像下面这段代码: # print absolute value of an integer: a = 10 ...