js怎么实现页面元素的拖拽功能

Question

如题所述

Answer 1

js实现一个拖拽事件的方法：
1、定义HTML
<div id="no-drop" class="draggable drag-drop"> #无拖动 </div>

<div id="yes-drop" class="draggable drag-drop"> #有拖动 </div>

<div id="outer-dropzone" class="dropzone">
#外层拖动
<div id="inner-dropzone" class="dropzone">#内层拖动</div>
</div>
2、定义css
/* 外层样式定义 */
#outer-dropzone {
height: 140px;
}

#inner-dropzone {
height: 80px;
}

.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}

.drop-active {
border-color: #aaa;
}

.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}