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

divTitle.draggable().click(function ()
{
$(this).draggable({ disabled: false });
$(this).css('backgroundColor', 'transparent');
}).dblclick(function ()
{
$(this).draggable({ disabled: true });
$(this).css('backgroundColor', '#FFFF6F');
});
这样控制一下就可以让div同时具有edit和drag属性了。

div的edit和drag(点击div可编辑、删除、拖动)的更多相关文章

  1. checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  2. HTML-点击Div读取本地文件内容

    <!DOCTYPE html> <html> <div id="container" onclick="choosefile();" ...

  3. 点击div 跳转并通过URL传参

    点击div前要先给div绑定要传的参数: //给panel绑定自定义属性,方便在跳转时传带参数,键/值对排列 panel.attr("user_age",user_age); pa ...

  4. 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

  5. 点击div区域以外部分,div区域隐藏

    核心思想: 监听body的click事件,事件触发的时候判断是否发生在弹出的div上,如果不在,关闭弹层 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  6. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  7. div加链接 html给div加超链接实现点击div跳转的方法[申明:来源于网络]

    div加链接 html给div加超链接实现点击div跳转的方法[申明:来源于网络] 地址:http://www.cdxwcx.com/faq/htmldivLink.html

  8. 21.JQ的监听事件(点击div外面可以让它消失)

    JQ的监听事件(点击div外面可以让它消失) //监听整个页面 $(document).bind("click", function() { //给需要的对象赋予事件 $(&quo ...

  9. js实现的点击div区域外隐藏div区域

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对 ...

随机推荐

  1. [design pattern](3) Dectorator

    前言 很久没有写关于设计模式的博客了,实在是没有太多的精力去写.但个人觉得设计模式在我们的日常开发中还是挺重要的,它提高了软件的可维护性.因此还是有必要坚持学习设计模式,写博客主要是为了加深我对设计模 ...

  2. python中加入中文注释报错处理

    python中加入中文注释,运行报错如下 解决方法: 在py文件的第一行加入   #coding:utf-8  即可

  3. springCloud分布式事务实战(一)案例需求及实现步骤

    本文不对分布式事务原理进行探索,而是通过一个案例来说明如何使用分布式事务 案例需求:创建2个基于springCloud的微服务,分别访问不同的数据库:然后创建一个整合服务,调用微服务实现数据的保存到2 ...

  4. 惠普服务器DL360G6安装ESXi主机后遗忘密码用u盘重置密码

    惠普服务器DL360G6安装ESXi主机后遗忘密码重置密码 先用rufus制作U盘启动盘,启动盘一定要用惠普专用hpe的esxi版本,否则安装会报错, 下载https://www.iplaysoft. ...

  5. java jar 服务自启动存在的坑及解决办法

    为了在服务器重启的时候,java程序能够自动重启,我们通常把它加到服务里面 ln -s /full/path/to/jar /etc/init.d/service_name # start servi ...

  6. ubuntu 安汉google浏览器

    在终端中,输入以下命令: sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/   ...

  7. ICML 2019 分析

    ICML 2019 分析 Word Embeddings Understanding the Origins of Bias in Word Embeddings Popular word embed ...

  8. FTP协议的两种工作模式简单解析!

    转载自百度百科:http://baike.baidu.com/link?url=KaBZmDM4IZ2v56MyoOnpjqKr0gADv_BRbgjlscYdyvh3-zDwINOHNPSi9Jlp ...

  9. cmd 中文显示错误,解决办法

    cmd窗口左上角控制按钮(就是图标)上单击-默认-选项-默认编码-936   追问 默认值是936的,但是属性里的当前代码页是437呀,怎么办 囧oz 追答 默认-选项-默认编码-936 不是属性,是 ...

  10. 旅游局nginx配置

    #user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log notice;#error_l ...