JS實現(xiàn)盒子拖拽效果
更新時間:2020年02月06日 11:02:04 作者:阿貓阿狗哈
這篇文章主要為大家詳細介紹了JS實現(xiàn)盒子拖拽效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)盒子拖拽效果的具體代碼,供大家參考,具體內(nèi)容如下
效果:
html代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>拖拽</title> <body> <div class="leftBox"></div> <div class="rightBox"> <!-- 開啟拖拽屬性draggable --> <div class="circle" draggable="true"></div> </div> </body> </html>
css代碼:
<style> .leftBox { display: inline-block; width: 100px; height: 100px; border: 1px solid black; border-radius: 10px; position: relative; } .rightBox { display: inline-block; width: 100px; height: 100px; border: 1px solid black; border-radius: 10px; position: relative; } .circle { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(25px at center, white, skyblue); /* 絕對居中 */ position: absolute; left: 50%; margin-left: -25px; top: 50%; margin-top: -25px; } </style>
js代碼:
<script> //獲取dom元素,分別是左盒子 圓圈 右盒子 var leftBox = document.querySelector('.leftBox'); var circle = document.querySelector('.circle'); var rightBox = document.querySelector('.rightBox'); var text = document.querySelector('.text'); //移動circle circle. //開啟左盒子的移入事件 leftBox.ondragover = function (event) { event.preventDefault(); } leftBox.ondrop = function () { leftBox.appendChild(circle); } //開啟右盒子的移入事件 rightBox.ondragover = function (event) { event.preventDefault(); } rightBox.ondrop = function () { rightBox.appendChild(circle); } </script>
關于事件的用法,官方用到了object.addEventListener("dragover", myScript)和event.target.id
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
淺析document.createDocumentFragment()與js效率
對于循環(huán)批量操作頁面的DOM有很大幫助!利用文檔碎片處理,然后一次性append,并且使用原生的javascript語句操作2013-07-07webpack 開發(fā)和生產(chǎn)并行設置的方法
這篇文章主要介紹了webpack 開發(fā)和生產(chǎn)并行設置的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11基于Web?Components實現(xiàn)一個日歷原生組件
這篇文章主要為大家詳細介紹了如何利用Web?Components實現(xiàn)一個簡單的日歷原生組件,文中的示例代碼講解詳細,需要的小伙伴可以了解一下2023-07-07