一、用戶行為三劍客
以下3個CSS屬性：用戶選擇屬性允許您設(shè)置是否允許用戶在頁面中選擇文本或圖形內(nèi)容;用戶修改屬性可以設(shè)置輸入框是否允許輸入內(nèi)容，以及是否只允許輸入純文本。有關(guān)詳細(xì)信息，請參見文章“如何使內(nèi)容可編輯元素僅輸入純文本”;
user-drag屬性數(shù)據(jù)可以通過設(shè)置是否允許頁面設(shè)計元素拖拽。
本文的主題是user-drag屬性。
二、禁止用戶拖拽
頁面中的圖文設(shè)計元素進(jìn)行設(shè)置-webkit-user-drag:none，則該元素就無法拖拽了。讓我們用下面的案例來了解一下相應(yīng)的效果。
有兩個圖像，一個是默認(rèn)的 ui 樣式，另一個是 css 代碼，用來禁用拖放。相關(guān)的 html 和 css 代碼如下:
?。糹mg src=“by zhangxinxu.jpg“＞
< img src = "張。jpg " class = " user-drag " >
.user-drag {
- webkit-user-drag: None;
}
因此，當(dāng)拖動默認(rèn)圖片時，您會看到一個半透明的圖片飛出，而設(shè)置了禁止使用拖拽的圖片，點(diǎn)擊拖拽的時候，是沒有其他任何教學(xué)效果的：
眼見為實(shí)，你可以點(diǎn)擊這里：CSS用戶拖動設(shè)置元素禁止拖動演示。
火狐瀏覽器還不支持，chrome 瀏覽器不支持 webkit-user-drag: element declaration，移動設(shè)備不能使用，用戶拖動兼容性
三、HTML draggable屬性
可以通過 css 設(shè)置拖放的優(yōu)勢在于，它很容易控制，并且可以很好地適用于只需要兼容 chrome 和 safari 瀏覽器的桌面 pc web 產(chǎn)品。
如果HTML有操作系統(tǒng)權(quán)限，且最終效果我們需要一個較好的兼容性，則還是企業(yè)需要進(jìn)行使用中國傳統(tǒng)的draggable屬性可以實(shí)現(xiàn)，通過自己設(shè)置true還是false設(shè)置元素能夠拖拽。
例如：
＜!-- 元素可以被拖動 --＞
＜img src=“zxx.jpg“ draggable=“true“＞
＜!-- 元素不可以被拖動 --＞
＜img src=“zxx.jpg“ draggable=“false“＞
draggable屬性常常和原生的drag & drop事件進(jìn)行配合我們使用，可以通過實(shí)現(xiàn)對于任意一個元素的拖拽效果。
對于那些以前貢獻(xiàn)過演示的人，您可以訪問此處了解實(shí)現(xiàn)細(xì)節(jié)，這些演示包括拖動、插入、排序、刪除等完整的交互。
Html drawable 屬性的兼容性相當(dāng)好，移動支持到處都是，而且 ie10 + 瀏覽器也支持 html 屬性，這些屬性在當(dāng)今時代基本上可以安全使用:
以上就是石家莊網(wǎng)站建設(shè)小編介紹的css禁止拖拽的元素介紹，想要做網(wǎng)站建設(shè)或者小程序的，歡迎前來咨詢了解，我們還有專業(yè)的團(tuán)隊，竭誠為您服務(wù)！
睿億網(wǎng)絡(luò)用心服務(wù)的團(tuán)隊，竭誠為您服務(wù) 
客服不能及時回復(fù)您，您可點(diǎn)擊QQ進(jìn)行交談 
