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. macOS 更新 git 命令提示 xcrun,.gitignore 配置不生效问题。

    macOS 更新 运行git提示xcrun: error: invalid active developer path 在终端输入 xcode-select --install 即可以解决该问题 .g ...

  2. 类锁和对象锁,synchronized修饰static方法与非static方法的区别

    当synchronized修饰一个static方法时,多线程下,获取的是类锁(即Class本身,注意:不是实例), 作用范围是整个静态方法,作用的对象是这个类的所有对象. 当synchronized修 ...

  3. 解决运行webpack --config webpack.dev.config.js 报错ReferenceError: _dirname is not defined

    控制台报错信息如下 将webpack.dev.config.js中的_dirname 改为 __dirname 注意这里是两个下划线谢谢!感觉好坑

  4. wannafly 练习赛11 F 求子树(树上莫队+换根)

    链接:https://www.nowcoder.com/acm/contest/59/F 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K 64b ...

  5. zabbix 监控安装部署

    今天尝试一下部署zabbix 官方文档包括多个版本,此处选择4.0版本 https://www.zabbix.com/documentation/4.0/manual 1.安装环境选择 zabbix4 ...

  6. SpringMVC中mvc:view-controller的使用

    1.重定向 <mvc:view-controller path="/" view-name="redirect:/admin/index"/> 即如 ...

  7. C# WPF 漂亮的loading 效果

    <UserControl x:Class="TestLoadPic.Loading" xmlns="http://schemas.microsoft.com/win ...

  8. 【linux】的文件按时间排序

    > ls -alt # 按修改时间排序 > ls --sort=time -la # 等价于> ls -alt > ls -alc # 按创建时间排序 > ls -alu ...

  9. 开发一个Flink应用

    步骤列表本次实战经历以下步骤: 创建应用:编码:构建:提交任务到Flink,验证功能: 环境信息Flink:1.7:Flink所在机器的操作系统:CentOS Linux release 7.5.18 ...

  10. yum 下载rpm包 安装rpm包依赖关系

    方法一:yumdownloader 工具 1.安装工具包 yum install yum-utils -y 2.下载一个RPM包 yumdownloader <package-name> ...