JS實(shí)現(xiàn)盒子拖拽效果
本文實(shí)例為大家分享了JS實(shí)現(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"> <!-- 開(kāi)啟拖拽屬性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); /* 絕對(duì)居中 */ 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'); //移動(dòng)circle circle. //開(kāi)啟左盒子的移入事件 leftBox.ondragover = function (event) { event.preventDefault(); } leftBox.ondrop = function () { leftBox.appendChild(circle); } //開(kāi)啟右盒子的移入事件 rightBox.ondragover = function (event) { event.preventDefault(); } rightBox.ondrop = function () { rightBox.appendChild(circle); } </script>
關(guān)于事件的用法,官方用到了object.addEventListener("dragover", myScript)和event.target.id
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
淺析document.createDocumentFragment()與js效率
對(duì)于循環(huán)批量操作頁(yè)面的DOM有很大幫助!利用文檔碎片處理,然后一次性append,并且使用原生的javascript語(yǔ)句操作2013-07-07JavaScript 檢測(cè)文件的類(lèi)型的方法
在日常工作中,文件上傳是一個(gè)很常見(jiàn)的功能。在某些情況下,我們希望能限制文件上傳的類(lèi)型,比如限制只能上傳 PNG 格式的圖片。本文就將針對(duì)這個(gè)問(wèn)題,來(lái)講解如何檢測(cè)文件的類(lèi)型2021-05-05用JS中split方法實(shí)現(xiàn)彩色文字背景效果實(shí)例
這篇文章介紹的是利用Javascript中的split方法來(lái)實(shí)現(xiàn)彩色文字背景效果,實(shí)現(xiàn)后的效果很好,有需要的可以參考借鑒。2016-08-08webpack 開(kāi)發(fā)和生產(chǎn)并行設(shè)置的方法
這篇文章主要介紹了webpack 開(kāi)發(fā)和生產(chǎn)并行設(shè)置的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11關(guān)于Javascript作用域鏈的八點(diǎn)總結(jié)
其實(shí)吧,關(guān)于作用域鏈相關(guān)的文章我也看了不少,但是我一直也沒(méi)能做一個(gè)詳細(xì)的總結(jié),今天把我看到的一些東西,結(jié)合自己的想法,總結(jié)成以下8個(gè)點(diǎn)2013-12-12基于Web?Components實(shí)現(xiàn)一個(gè)日歷原生組件
這篇文章主要為大家詳細(xì)介紹了如何利用Web?Components實(shí)現(xiàn)一個(gè)簡(jiǎn)單的日歷原生組件,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解一下2023-07-07JS實(shí)現(xiàn)的簡(jiǎn)單四則運(yùn)算計(jì)算器功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單四則運(yùn)算計(jì)算器功能,涉及javascript事件響應(yīng)及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-09-09