矩形框拖放是一種常見(jiàn)的交互方式，可以讓用戶(hù)更便捷地移動(dòng)、調(diào)整元素的位置和大小。CSS3新增了drag和drop屬性，可以實(shí)現(xiàn)矩形框的任意拖放，讓網(wǎng)頁(yè)變得更加靈活美觀。

/* CSS樣式 */
#drag {
width: 100px;
height: 100px;
background: #ccc;
cursor: pointer;
}
/* 拖放事件 */
#drag[draggable=true] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-ms-user-select: none;
cursor: move;
}
/* 拖放目標(biāo)框 */
#drop {
width: 400px;
height: 400px;
border: 1px solid #000;
position: relative;
}

在HTML代碼中，我們需要設(shè)置一個(gè)可拖放的矩形框和一個(gè)拖放的目標(biāo)框。

JS代碼中實(shí)現(xiàn)拖放的功能，通過(guò)拖放事件、拖放目標(biāo)事件、拖動(dòng)開(kāi)始事件、拖動(dòng)結(jié)束事件，來(lái)實(shí)現(xiàn)矩形框的任意拖放。

/* JS代碼 */
// 拖動(dòng)開(kāi)始事件
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
// 拖動(dòng)結(jié)束事件
function dragEnd(event) {
event.dataTransfer.clearData("Text");
}
// 拖放事件
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
// 拖放目標(biāo)事件
function allowDrop(event) {
event.preventDefault();
}

以上代碼即可實(shí)現(xiàn)矩形框的任意拖放，通過(guò)調(diào)整CSS樣式和JS代碼，可以實(shí)現(xiàn)更加豐富的拖放效果。