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.对 ...
随机推荐
- B. Array K-Coloring
B. Array K-Coloring 给定一个数组 要求对元素进行染色,满足相同元素颜色一定不同,且所有颜色要全部用完 #include<bits/stdc++.h> using nam ...
- 模板引擎ejs的include方法
html无法include header.ejs footer.ejs 最后用 user.ejs在首尾include
- zay大爷的膜你题 D2T2——不老梦(AK梦)
还是万年不变的外链 这个题.....是最难的....但是不知道为啥扶苏神仙讲完了之后我竟然听懂了.... 所以这个题我要好好写一写 首先我们看一看每一个测试点,来一点点得分 第一个测试点n = 1,直 ...
- np.random.shuffle(x)与np.random.permutation(x)
来自:https://blog.csdn.net/brucewong0516/article/details/79012233 将数组打乱随机排列 两种方法: np.random.shuffle(x) ...
- 【flask-Email】邮件发送
使用依赖: flask_mail 安装方式: pip3 install flask-mail 代码示例: from flask import Flask from flask_mail import ...
- Redis存储对象序列化和反序列化
import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.ObjectInpu ...
- 读取yaml中的内容
def read_yml(path): """ 读取yml文件中的数据 :param path: 文件yaml 的路径 :return: 返回读取yaml文件内的结果 & ...
- .Net 逆向 Reflector之reflexil使用
网上下载了一款商用的教育培训类软件,是用.Net写的,标榜的是免费的,但是只能试用一个月,商家很精明,用此方法推广招揽客户,但是公司在这一块却没有预算购买,一开始就想着既然是商用软件,安全机制做的肯定 ...
- Lua增加一个节点到文件中
新建一个文件touch /etc/config/ddns 增加一个节点到文件中uci set ddns.newadd=config <config>:即配置文件,如ddns,ipv6等&l ...
- c# AES128 加解密算法
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...