让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‘);

[html] view plain copy

  1. <span style="font-size:18px">divTitle.draggable().click(function ()
  2. {
  3. $(this).draggable({ disabled: false });
  4. $(this).css(‘backgroundColor‘, ‘transparent‘);
  5. }).dblclick(function ()
  6. {
  7. $(this).draggable({ disabled: true });
  8. $(this).css(‘backgroundColor‘, ‘#FFFF6F‘);
  9. });</span>

这样控制一下就可以让div同时具有edit和drag属性了。

6
时间: 2024-10-25 00:59:27

让DIV可编辑、可拖动的相关文章

IOS第七天(6:UiTableView编辑模式, 拖动位置 ,滑动删除)

**********UiTableView编辑模式, 拖动位置 ,滑动删除 #import "HMViewController.h" @interface HMViewController () <UITableViewDataSource, UITableViewDelegate> /** 数据列表 */ @property (nonatomic, strong) NSMutableArray *dataList; @property (nonatomic, strong

div,contenteditable编辑器之ctrl+enter换行,enter发送

本想扯点废话的,赶着做项目先把代码丢上来日后再说,想看效果的直接拷贝代码过去即可. <!doctype html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="utf-8"> <title>cont

contenteditable=&quot;true&quot;让div可编辑

今天才知道有这个属性,真是out了. 不过以前一直没做编辑器有关的,毕竟开源的很多. 现在觉得开源的也不是这么好用,自己写写简单的吧 用了 <div class="content-box" contenteditable="true"> 我们就能在这个div内部进行编辑了. 有人要问了,有textarea,还需要这个吗 当然,用它的好处就是能插入标签. 比如说图片和视频标签 配合Jquery的html方法就能获取里面的内容了 var content=$(

div可编辑框,去除粘贴文字样式&#128516;

上个月做了个聊天的需求(网页版的).说到聊天都想到输入框,说到输入框都会想到input,但是input标签是不支持插入图片的(包括areatext标签).查阅了一些资料就看到div标签有一个属性contenteditable,这个属性设置为true的话,div会变成可编辑状态,非常神奇,而且是可以插入图片的. 之所以写这篇文章当然不是只为了说这个简单的事情啦.因为开发的时候会遇到一个事情,就是复制别的地方的带样式的文字的时候,粘贴到div里,特么会把样式带上,可把我烦死了.各种查阅资料怎么去除样

鼠标拖动改变DIV等网页元素的大小的最佳实践

1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div change

js-处理div设置的编辑框处理焦点定位追加内容

具体实现方法如下: 首先要让DIV启用编辑模式 <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了.不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置② 改变光标位置 var cursor = 0; // 光标位置 document.onselectionchange = funct

Javascript 简单实现鼠标拖动DIV

http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/article/10578.htm <html> <head><title>拖动效果函数演示 by Longbill.cn</title> <style> body { font-size:12px; color:#333333; border : 0px

可编辑div将光标定位到最后

最近做了一个可以回复留言的页面,主要包括:@.表情功能,一开始使用的是文本域textarea,最后发现这样无法显示表情,后来改成可编辑div,在div中添加contenteditable="true",则该div即可编辑. <div contenteditable="true"></div> 在选择表情或者选择@某人后,会经常遇到选择后可编辑div中的光标不见了,或者显示的位置不对,于是在网上找了些方法,现在总结下: function set

jquery拖动DIV[转]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Conte