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.对 ...
随机推荐
- 3D Computer Grapihcs Using OpenGL - 19 Vertex Array Object(顶点数组对象)
大部分OpenGL教程都会在一开始就讲解VAO,但是该教程的作者认为这是很不合理的,因为要理解它的作用需要建立在我们此前学过的知识基础上.因此直到教程已经进行了一大半,作者才引入VAO这个概念.在我看 ...
- Java基础之文件的输入输出流操作
在介绍输入输出流之前,首先需要了解如何创建文件,创建文件夹以及遍历文件夹等各种操作,这里面不在一一介绍,主要介绍的是文件的输入输出流操作. 在起初学习文件操作之前,总是喜欢将输入输出弄混淆,后来通过看 ...
- pyCharm报错"your evaluation license has expired, pycharm will now exit"解决方法(实测)
一.修改C:\Windows\System32\drivers\etc 目录下的hosts文件 1.打开hosts文件,路径是 c:\windows\system32\drivers\etc\host ...
- mac osx终端批量删除文件
sudo su cd / find ./ -name "*.html" -exec rm -rf {} \; 注意 {}和\;之间有空格 find [目录名] -name &qu ...
- Docker容器技术入门
独立容器分开的条件: 1.Namespace命名空间 1.主机名和域名,UTS 2.文件系统,mount 3.进程间通信,IPC 4.独立的进程树PID 5.独立的用户User 6.独立的IP地址tc ...
- 1、VMware安装步骤
最后重启电脑
- Django学习之Form表单
一.Form介绍 普通方式手写注册功能 使用form组件实现注册功能 二.Form那些事儿 1.常用字段与插件 initial error_messages password radioSelect ...
- 写入mongodb
https://blog.csdn.net/u013421629/article/details/78885079 https://www.jianshu.com/p/7d14c3ad810f 可视 ...
- Python学习之==>操作MySQL
一.简介: MySQL为关系型数据库,其他关系型数据库包括Oracle.DB2.Sql Server等等.Python操作MySQL需要使用到pymsyql模块,pip安装即可. 二.操作MySQL步 ...
- flultter listview异常type '(BuildContext, int) => dynamic' is not a subtype of type '(BuildContext, int) => Widget'
type '(BuildContext, int) => dynamic' is not a subtype of type '(BuildContext, int) => Widget' ...