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可编辑、可拖动的更多相关文章

  1. div可编辑 可拖动

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.可编辑: <div id="move" contentEditable="true">可编 ...

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

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

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

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

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

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

  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. 7月份计划-----dream

    梦想还是要有的,万一实现了呢? 数学 150[total] 专业课 150[total] 英语 100[total] 政治 100[total] 第一轮复习计划开始执行 1.专业课: 通过课件把所有的 ...

  2. windows下composer安装

    第一步:配置path.这里我的php在C:\… \php目录下面. 第二步: 方法一: 使用安装程序 这是将 Composer 安装在你机器上的最简单的方法. 下载并且运行 Composer-Setu ...

  3. HTTP/HLS/RTMP超级负载测试工具(转)

    这个负载测试工具是网游分享的工具,可以在http://blog.csdn.net/win_lin/article/details/11835011 或者https://github.com/winli ...

  4. Stacks of Flapjacks(栈)

     Stacks of Flapjacks  Background Stacks and Queues are often considered the bread and butter of data ...

  5. 如何基于EasyDSS体系的全套SDK完成各种场景下的视频应用需求

    需求背景 回顾EasyDSS的发展过程,基本上保持的是先局部后系统.先组件后平台的发展方式,一步一步夯实每一个细节功能点,从最基础.最兼容的音视频数据的拉流获取,到高效的.全兼容的数据推流,再到流媒体 ...

  6. js跨浏览器复制: ZeroClipboard

    实例结构: demo.html <script type="text/javascript" src='http://code.jquery.com/jquery.js'&g ...

  7. Webpack探索【7】--- sourceMap、自动构建刷新功能详解

    本文主要讲sourceMap.自动构建刷新功能.

  8. 爬虫-【selenium—Webdriver元素定位的八种常用方式

    在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方式共八种,现分别介绍如下 ...

  9. cocos2d-x CCControl控件

    感谢点评与关注.欢迎转载与分享.勤奋努力,持之以恒! CCControlSlider 滑动条 void HelloWorld::myInit10() { CCSize size = CCDirecto ...

  10. 跨域与ie浏览器的相关问题

    文章出处url:https://segmentfault.com/a/1190000002647143 产生跨域问题的原因 跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性. 跨域 ...