CSS可以實現拖拽文字的效果,需要用到CSS3中的拖拽屬性drag。
/* 在拖拽操作開始時,將元素標記為可拖拽 */ .drag-text { -webkit-user-drag: element; -moz-user-drag: element; -ms-user-drag: element; user-drag: element; } /* 在元素被拖拽時,改變它的背景顏色 */ .drag-text:active { background-color: #ccc; }
以上代碼為將指定元素添加拖拽屬性,并在拖拽操作開始時改變元素的背景顏色。可以通過添加javascript代碼來實現更復雜的拖拽效果。
示例代碼:
<div class="drag-text">這是可拖拽文字</div> <script> var dragText = document.querySelector('.drag-text'); dragText.addEventListener('drag', function(e) { this.style.left = e.pageX + 'px'; this.style.top = e.pageY + 'px'; }); </script>
以上代碼通過javascript監聽元素的drag事件,在拖拽操作過程中改變元素的位置,實現了文字拖拽的效果。
下一篇css實現按鈕3d效果