div的edit和drag(点击div可编辑、删除、拖动)
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可编辑、删除、拖动)的更多相关文章
- checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中
checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...
- HTML-点击Div读取本地文件内容
<!DOCTYPE html> <html> <div id="container" onclick="choosefile();" ...
- 点击div 跳转并通过URL传参
点击div前要先给div绑定要传的参数: //给panel绑定自定义属性,方便在跳转时传带参数,键/值对排列 panel.attr("user_age",user_age); pa ...
- 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- 点击div区域以外部分,div区域隐藏
核心思想: 监听body的click事件,事件触发的时候判断是否发生在弹出的div上,如果不在,关闭弹层 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- div加链接 html给div加超链接实现点击div跳转的方法[申明:来源于网络]
div加链接 html给div加超链接实现点击div跳转的方法[申明:来源于网络] 地址:http://www.cdxwcx.com/faq/htmldivLink.html
- 21.JQ的监听事件(点击div外面可以让它消失)
JQ的监听事件(点击div外面可以让它消失) //监听整个页面 $(document).bind("click", function() { //给需要的对象赋予事件 $(&quo ...
- js实现的点击div区域外隐藏div区域
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对 ...
随机推荐
- React 项目 ant design 的 CheckboxGroup 验证
使用 ant design 提供的 getFieldDecorator 进行验证 一般开始使用默认选中 <FormItem> {getFieldDecorator('checkProtoc ...
- Qt 静态库与共享库(动态库)共享配置的一个小办法
对于用 QtCreator 编写静态库,动态库,如何能够以最小的改动, 方便的实现两种形式的库文件生成:可以这麽做: 1)使用想到建立静态库 2)在项目配置文件*.pro 中: TARGET = n ...
- python3学习笔记(二):Python初识
一.算法 在开始认真地编程之前,首先来解释下什么是计算机程序设计.简单地说,它就是告诉计算机要做什么.计算机可以做很多事情,但是它不会自己思考,需要我们告诉它具体细节,并且使用计算机能够理解的语言把算 ...
- HDU1847--Good Luck in CET-4 Everybody!(SG函数)
Problem Description 大学英语四级考试就要来临了,你是不是在紧张的复习?也许紧张得连短学期的ACM都没工夫练习了,反正我知道的Kiki和Cici都是如此.当然,作为在考场浸润了十几载 ...
- CodeChef-----February Challenge 2018---Broken Clock(极坐标+三角函数递推+矩阵快速幂)
链接: https://www.codechef.com/FEB18/problems/BROCLK Broken Clock Problem Code: BROCLK Chef has a clo ...
- springBoot 配置url 访问图片
需要添加依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- mysql数据库表反向生成modes类
一,如果你是windows,打开cmd,切换到desktop目录下 二,需要连接你的数据库,并且执行命令:sqlacodegen --outfile models.py mysql+pymysql: ...
- mysql 5.7 Could not load driverClass com.mysql.cj.jdbc.Driver
参考: http://www.manongjc.com/article/24424.html https://blog.csdn.net/kingscoming/article/details/788 ...
- webrtc相关概念
SDP Session Description Protocol Session Traversal Utilities for NAT(STUN)Traversal Using Relays aro ...
- 【C++进阶】 to_string,stringstream
to_string函数主要进行以下一些参数转换为string stringstream,位于<sstream>库中 https://blog.csdn.net/jllongbell/art ...