如何让DIV可编辑、可拖动示例代码
更新时间：2013年09月18日 15:31:01 作者：
DIV是一个盒子模型通俗说就是一个容器，在布局过程中经常会使用到这个标签，在本文大家将学会如何让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属性了。
<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属性了。
相关文章
JavaScript的async和await关键词是现代JavaScript异步编程的核心,它们让异步代码看起来和同步代码几乎一样,使得异步编程变得更加直观和易于管理,本文介绍20个关于async/await的实用技巧,将大大提升编程效率和代码的清晰度,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了js Canvas绘制圆形时钟教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了bootstrapValidator自定验证方法写法，研究bootstrapValidator验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JavaScript遍历数组的方法代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
这篇文章主要为大家详细介绍了js实现音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
js与jQuery实现checkbox复选框全选/全不选的方法
这篇文章主要介绍了js与jQuery实现checkbox复选框全选/全不选的方法,结合实例较为详细的分析了JavaScript与jQuery针对checkbox复选框全选与反选的操作技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍Javascript将数字转化成为货币格式字符串的方法,通俗易懂,需要的朋友可以参考下。2016-06-06
这篇文章主要介绍了PHP配置文件php.ini中打开错误报告的设置方法,需要的朋友可以参考下2015-01-01
这篇文章主要给大家介绍了关于Webpack中loader打包各种文件的相关资料，其中包括处理css文件、less文件、scss文件、url地址以及ES6高级语法的方法，需要的朋友可以参考下2019-09-09
怎么限制input的text里输入的值只能是数字(正则、js)
这篇文章主要通过正则表达式和JS代码限制input的text里输入的值只能是数字的相关资料,需要的朋友可以参考下2016-05-05
最新评论