如何讓DIV可編輯、可拖動(dòng)示例代碼
更新時(shí)間：2013年09月18日 15:31:01 作者：
DIV是一個(gè)盒子模型通俗說就是一個(gè)容器，在布局過程中經(jīng)常會(huì)使用到這個(gè)標(biāo)簽，在本文大家將學(xué)會(huì)如何讓DIV可編輯、可拖動(dòng)，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
1、可編輯：
<div id="move" contentEditable="true">可編輯</div>
設(shè)置contentEditable屬性可以讓div編程可編輯狀態(tài)
2、可拖動(dòng)：
$('#move').draggable();
使用jQuery UI的draggable可以讓div變成可拖動(dòng)狀態(tài)，但是如果兩個(gè)屬性同時(shí)應(yīng)用就會(huì)出現(xiàn)可編輯功能失效的狀況。
3、可編輯、可拖動(dòng)：
<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同時(shí)具有edit和drag屬性了。
<div id="move" contentEditable="true">可編輯</div>
設(shè)置contentEditable屬性可以讓div編程可編輯狀態(tài)
2、可拖動(dòng)：
$('#move').draggable();
使用jQuery UI的draggable可以讓div變成可拖動(dòng)狀態(tài)，但是如果兩個(gè)屬性同時(shí)應(yīng)用就會(huì)出現(xiàn)可編輯功能失效的狀況。
3、可編輯、可拖動(dòng)：
復(fù)制代碼 代碼如下:
<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同時(shí)具有edit和drag屬性了。
相關(guān)文章
20個(gè)你不得不知道的JS async/await實(shí)用技巧
JavaScript的async和await關(guān)鍵詞是現(xiàn)代JavaScript異步編程的核心,它們讓異步代碼看起來和同步代碼幾乎一樣,使得異步編程變得更加直觀和易于管理,本文介紹20個(gè)關(guān)于async/await的實(shí)用技巧,將大大提升編程效率和代碼的清晰度,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了js Canvas繪制圓形時(shí)鐘教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
bootstrapValidator自定驗(yàn)證方法寫法
這篇文章主要為大家詳細(xì)介紹了bootstrapValidator自定驗(yàn)證方法寫法，研究bootstrapValidator驗(yàn)證,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript遍歷數(shù)組的方法代碼實(shí)例
這篇文章主要介紹了JavaScript遍歷數(shù)組的方法代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
js與jQuery實(shí)現(xiàn)checkbox復(fù)選框全選/全不選的方法
這篇文章主要介紹了js與jQuery實(shí)現(xiàn)checkbox復(fù)選框全選/全不選的方法,結(jié)合實(shí)例較為詳細(xì)的分析了JavaScript與jQuery針對(duì)checkbox復(fù)選框全選與反選的操作技巧,需要的朋友可以參考下2016-01-01
Javascript將數(shù)字轉(zhuǎn)化成為貨幣格式字符串
這篇文章主要介紹Javascript將數(shù)字轉(zhuǎn)化成為貨幣格式字符串的方法,通俗易懂,需要的朋友可以參考下。2016-06-06
PHP配置文件php.ini中打開錯(cuò)誤報(bào)告的設(shè)置方法
這篇文章主要介紹了PHP配置文件php.ini中打開錯(cuò)誤報(bào)告的設(shè)置方法,需要的朋友可以參考下2015-01-01
Webpack中l(wèi)oader打包各種文件的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Webpack中l(wèi)oader打包各種文件的相關(guān)資料，其中包括處理css文件、less文件、scss文件、url地址以及ES6高級(jí)語法的方法，需要的朋友可以參考下2019-09-09
怎么限制input的text里輸入的值只能是數(shù)字(正則、js)
這篇文章主要通過正則表達(dá)式和JS代碼限制input的text里輸入的值只能是數(shù)字的相關(guān)資料,需要的朋友可以參考下2016-05-05