CSS拖拽效果

時間 2019-11-16

標籤 css 效果欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5實現的拖拽效果</title>
<style>
#boxA, #boxB {
float:left;
width:200px;
height: 300px;
padding:10px; margin:10px;
}html

#boxA { background-color: chartreuse; }
#boxB { background-color: chartreuse; }app

#drag, #drag2, #drag3,#drag4,#drag5,#drag6 {
width:85px; height:28px; padding:5px; margin:5px;
}
#drag { background-color: slateblue;}
#drag2 { background-color:deeppink;}
#drag3 { background-color: orangered;}
#drag4 { background-color: sandybrown;}
#drag5 { background-color: #f0c040;}
#drag6 { background-color: purple;}
</style>
</head>
<body>
<div style="text-align: center;font-weight: 600;font-size: 20px" id="boxA" ondrop="drop(event)" ondragover="allowDrop(event)">ui

<div id="drag" draggable="true" ondragstart="drag(event)">效果一</div>htm

<div id="drag2" draggable="true" ondragstart="drag(event)">效果二</div>ip

<div id="drag3" draggable="true" ondragstart="drag(event)">效果三</div>utf-8

</div>get

<div style="text-align: center;font-weight: 600;font-size: 20px" id="boxB" ondrop="drop(event)" ondragover="allowDrop(event)">it

<div id="drag4" draggable="true" ondragstart="drag(event)">效果1</div>io

<div id="drag5" draggable="true" ondragstart="drag(event)">效果2</div>event

</div>

</body></html>