一、用戶行為三劍客

　　以下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è)置了禁止使用拖拽的圖片，點擊拖拽的時候，是沒有其他任何教學(xué)效果的：

　　眼見為實，你可以點擊這里：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屬性可以實現(xiàn)，通過自己設(shè)置true還是false設(shè)置元素能夠拖拽。

　　例如：

　　 ＜!-- 元素可以被拖動 --＞

　　 ＜img src=“zxx.jpg“ draggable=“true“＞

　　 ＜!-- 元素不可以被拖動 --＞

　　 ＜img src=“zxx.jpg“ draggable=“false“＞

　　 draggable屬性常常和原生的drag & drop事件進(jìn)行配合我們使用，可以通過實現(xiàn)對于任意一個元素的拖拽效果。

　　對于那些以前貢獻(xiàn)過演示的人，您可以訪問此處了解實現(xiàn)細(xì)節(jié)，這些演示包括拖動、插入、排序、刪除等完整的交互。

　　Html drawable 屬性的兼容性相當(dāng)好，移動支持到處都是，而且 ie10 + 瀏覽器也支持 html 屬性，這些屬性在當(dāng)今時代基本上可以安全使用:

　　以上就是石家莊網(wǎng)站建設(shè)小編介紹的css禁止拖拽的元素介紹，想要做網(wǎng)站建設(shè)或者小程序的，歡迎前來咨詢了解，我們還有專業(yè)的團(tuán)隊，竭誠為您服務(wù)！