如何让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');
[code]
<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属性了。

赞 (0)

相关推荐

  • vue实现导航菜单和编辑文本的示例代码

    导航菜单实例 <div id="main"> <!-- 激活的菜单样式为 active 类 --> <!-- 为了阻止链接在点击时跳转,我们使用了 "prevent" 修饰符 (preventDefault 的简称). --> <nav v-bind:class="active" v-on:click.prevent> <!-- 当菜单上的链接被点击时,我们调用了 makeActive 方法,

  • 如何让DIV可编辑、可拖动示例代码

    1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可以让div编程可编辑状态 2.可拖动: $('#move').draggable(); 使用jQuery UI的draggable可以让div变成可拖动状态,但是如果两个属性同时应用就会出现可编辑功能失效的状况. 3.可编辑.可拖动: 复制代码 代码如下: <div id="mo

  • 让元素在网页中可拖动示例代码

    1.导入相应的JS类库: 复制代码 代码如下: <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 2.带有id的div元素: 复制代码 代码如下: <div id="draggable&qu

  • JavaScript模块随意拖动示例代码

    复制代码 代码如下: <!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=&qu

  • JS实现拖动示例代码

    JS实现拖动示例代码

    getBoundingClientRect() 来获取页面元素的位置 复制代码 代码如下: document.documentElement.getBoundingClientRect 该方法返回一个对象,从而获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,即分别代表该元素上.左.右.下四条边界相对于浏览器窗口左上角(注意,不是文档区域的左上角)的偏移像素值.并且该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大

  • vue+iview 实现可编辑表格的示例代码

    先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具... 毕竟公司还在用angularjs+jq. 这也是我第一次写文章,大家看看思路就行了,要是有大佬指点指点就更好了 话不多说,先来个效果图 我们再看下极为简单的目录结构 IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关

  • jquery获取div宽度的实现思路与代码

    jquery 获取 DIV的width的语句: 复制代码 代码如下: $("#keleyi_com").width(); 其中keleyi_com为DIV的id. 完整示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • vue中实现拖动调整左右两侧div的宽度的示例代码

    写在最前 最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样 这是我最终的实现效果 还是老话,因为我不是专业的前端工程师,只是兼职写一些简单的前端,所以这个功能的实现得益于以下博客,<vue 拖动调整左右两侧div的宽度>.<vuejs中拖动改变元素宽度实现宽度自适应大小>,而我只是针对于他们提供的代码,加了亿点点自己所需要的细节. 实现原理 如上图所示,我们需要将要实现此功能的页面划分为三个部分,左部.调整区.右部,分别对应css样式为le

  • 原生JavaScript实现滑动拖动验证的示例代码

    本文介绍了原生JavaScript实现滑动拖动验证的示例代码,分享给大家,具体如下: 通常,我们为了防止用户恶意提交表单,会让用户在提交前完成滑动拖动验证,有时候这也能起到一丝反爬的作用. 实现滑动验证的方式当然不止一种,这里我们直接使用原生 JavaScript 来实现. 现在,你可以在这里 看到完整的源码. 原生实现 原生 JavaScript 的实现,主要是通过监听鼠标事件来对 DOM 进行一系列的操作. 滑块验证的结构主要分为四个部分:轨道.滑块.背景和文案,我们可以使用下面的 HTML

  • jQuery实现DIV层淡入淡出拖动特效的方法

    本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <style type="text/css"> #div2 {     position:absolute;     width:400px;     height:300px;     border

随机推荐