版权声明:本文为博主原创文章,未经博主允许不得转载。

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');

  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属性了。

 

div可编辑 可拖动的更多相关文章

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

    **********UiTableView编辑模式, 拖动位置 ,滑动删除 #import "HMViewController.h" @interface HMViewContro ...

  2. 使DIV相对窗口大小左右拖动始终水平居中

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  3. div 可编辑--获取光标位置插入元素

    <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Language" ...

  4. 如何让DIV可编辑、可拖动

    1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEdit ...

  5. div的edit和drag(点击div可编辑、删除、拖动)

    1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEdit ...

  6. 设置DIV可编辑

    <div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可 ...

  7. contenteditable="true"让div可编辑

    今天才知道有这个属性,真是out了. 不过以前一直没做编辑器有关的,毕竟开源的很多. 现在觉得开源的也不是这么好用,自己写写简单的吧 用了 <div class="content-bo ...

  8. div可编辑框,去除粘贴文字样式😄

    上个月做了个聊天的需求(网页版的).说到聊天都想到输入框,说到输入框都会想到input,但是input标签是不支持插入图片的(包括areatext标签).查阅了一些资料就看到div标签有一个属性con ...

  9. DIV可编辑后,与限制输入及光标偏移的纠葛

    前言 最近在弄个人的网站,偶然间发现DIV可以设置编辑模式,之前设计的方案在此功能上需要限制输入的长度.网上搜索了一波,综合搜索的结果,考虑使用的监听事件有:keydown .textInput .i ...

随机推荐

  1. tomcat如何修改发布目录

    tomcat免重启 tomcat访问的时候如何去掉项目名访问: 其中fts是您的项目名. 1.tomcat6.0:<Host></Host>间加了一句<Context p ...

  2. Android audioManager

    Android audioManager AudioManager provides access to volume and ringer mode control. 获取对象 Use Contex ...

  3. HBase 官方文档

    HBase 官方文档 Copyright © 2010 Apache Software Foundation, 盛大游戏-数据仓库团队-颜开(译) Revision History Revision ...

  4. cisco 2901 配置拨号上网

    1.输入en,然后输入密码确认后按conf t2.Router(config)# vpdn enable        interface dialer 1   // 进入拨号器13.Router(c ...

  5. C++中栈结构建立和操作

    什么是栈结构 栈结构是从数据的运算来分类的,也就是说栈结构具有特殊的运算规则,即:后进先出. 我们可以把栈理解成一个大仓库,放在仓库门口(栈顶)的货物会优先被取出,然后再取出里面的货物. 而从数据的逻 ...

  6. 太有用了,所以转:Delphi下16进制位图数据转位图

    如果我们在Form中拖入一个Image控件,并设置好picture后,Alt+F12就可以看到Form的源代码中已经将图片转成了16进制字符串,如下: object Image1: TImage Le ...

  7. AngularJs(Part 6)

    Overcomming same-origin policy restrictions with JSONP. AJAX has a restriction that it can only retr ...

  8. hadoop-maven项目打包成可执行的jar

    环境: cdh5.1.0 jdk1.7 <build> <plugins> <!--指定JDK为1.7 --> <plugin> <groupId ...

  9. Python及R安装包版本查看方法

    R包查询 查询已安装的所有的包:library() 或installed.packages()(括号内为空,区别以上两项) 查询具体包的信息: help(package="pheatmap& ...

  10. PHP中空字符串、0、null、empty和false之间的关系

    原文来自:http://www.seayee.net/article/info_115.html