如何让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');
<span style="font-size:18px">divTitle.draggable().click(function ()
{
$(this).draggable({ disabled: false });
$(this).css('backgroundColor', 'transparent');
}).dblclick(function ()
{
$(this).draggable({ disabled: true });
$(this).css('backgroundColor', '#FFFF6F');
});</span
这样控制一下就可以让div同时具有edit和drag属性了。
如何让DIV可编辑、可拖动的更多相关文章
- div可编辑 可拖动
版权声明:本文为博主原创文章,未经博主允许不得转载. 1.可编辑: <div id="move" contentEditable="true">可编 ...
- IOS第七天(6:UiTableView编辑模式, 拖动位置 ,滑动删除)
**********UiTableView编辑模式, 拖动位置 ,滑动删除 #import "HMViewController.h" @interface HMViewContro ...
- 使DIV相对窗口大小左右拖动始终水平居中
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- div 可编辑--获取光标位置插入元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Language" ...
- div的edit和drag(点击div可编辑、删除、拖动)
1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEdit ...
- 设置DIV可编辑
<div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可 ...
- contenteditable="true"让div可编辑
今天才知道有这个属性,真是out了. 不过以前一直没做编辑器有关的,毕竟开源的很多. 现在觉得开源的也不是这么好用,自己写写简单的吧 用了 <div class="content-bo ...
- div可编辑框,去除粘贴文字样式😄
上个月做了个聊天的需求(网页版的).说到聊天都想到输入框,说到输入框都会想到input,但是input标签是不支持插入图片的(包括areatext标签).查阅了一些资料就看到div标签有一个属性con ...
- DIV可编辑后,与限制输入及光标偏移的纠葛
前言 最近在弄个人的网站,偶然间发现DIV可以设置编辑模式,之前设计的方案在此功能上需要限制输入的长度.网上搜索了一波,综合搜索的结果,考虑使用的监听事件有:keydown .textInput .i ...
随机推荐
- EJB是什么?(节选)
近期的项目中使用了EJB.当时就仅仅知道怎么用,没有深入的去理解.当完毕这个项目之后.再回想项目中使用的技术.框架以及工具的时候,突然感觉对EJB这个概念非常是模糊,于是上网搜一些资料.可是,非常多的 ...
- vmware workstation导出ovf
ovf tool路径 /Applications/VMware Fusion.app/Contents/Library/VMware OVF Tool 上面红色的部分,需要右键点击应用程序中的VMwa ...
- vs2013中opencv的配置
下面开始介绍如何配置,我用的系统是win8.1 64位系统,vs用的是vs3013 ultimate,先到官网下载opencv 我用的的版本是最新的版本3.0 ALPHA,下载下来直接执行即可,实际上 ...
- 【JMeter4.0学习(八)】之断言
目录 响应断言 一.响应断言 1.添加线程组 2.添加HTTP请求默认值 3.添加HTTP请求1 4.先运行“HTTP请求1”,查看结果树的“取样器结果.请求.响应数据” ①取样器结果 ②请求 ③响应 ...
- 12 Memcached 缓存无底洞现象
一:Memcached 缓存无底洞现象(1)facebook的工作人员反应的,facebook在2010年左右,memcached节点就已经达到了3000个,存储的数据进千G的数据存储. 他们发现一个 ...
- Android中的常见通信机制和Linux中的通信机制
Handler Handler是Android系统中的一种消息传递机制,起作用是应对多线程场景.将A进程的消息传递给B线程,实现异步消息处理.很多情况是将工作线程中需要更新UI的操作消息传递给UI主线 ...
- AR9331出现connect-debounce failed,port 1 disabled解决方法备忘
基于AR9331的路由器,自己画的pcb板子,居然出现这个错误,百度下,貌似有不少人遇见过这个错误,可是在改动板子前我的固件用的是没问题的.USB完美使用 改动过板子后出现这个问题! hub 1-0: ...
- 执行后台任务的利器——Hangfire
Hangfire是一个开源且商业免费使用的工具函数库.可以让你非常容易地在ASP.NET应用(也可以不在ASP.NET应用)中执行多种类型的后台任务,而无需自行定制开发和管理基于Windows Ser ...
- 两个Java项目之间相互调用
转自:http://dysfzhoulong.iteye.com/blog/1008747 一个项目A另一个项目B:(项目A和项目B都是Java写的项目) 在A项目中怎么调用B项目中的类和方法 有两种 ...
- Android底部菜单栏+顶部菜单
底部菜单栏+顶部菜单(wechat)demo http://blog.csdn.net/evankaka/article/details/44121457 底部菜单demo http://blog.c ...