首页
前端开发
HTML5
HTML5拖放交互实现

HTML5拖放交互实现

0 次浏览 0 条评论
rar
rar

HTML5 的拖放 API，功能挺全的，写交互效果的时候顺手。像你要做个文件管理器，或者实现那种“拖动图片换位置”的效果，这套 API 就合适。核心几个事件：dragstart、dragover、drop，记住加上event.preventDefault()，不然浏览器不买账。

dataTransfer 对象算是关键中的关键，拖动啥、放哪儿，全靠它传数据。你可以通过event.dataTransfer.setData()来设置拖动的内容，再用getData()拿回来。整个流程其实不复杂，写起来也比较直观。

代码方面，也不长，像下面这个小例子，拖个 DOM 元素放到另一个容器里：



拖我！


function allowDrop(event) {
  event.preventDefault();
}


function dragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
}


function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData('text/plain');
  var draggedElement = document.getElementById(data);
  event.target.appendChild(draggedElement);
}

这代码逻辑蛮清晰的，先设置draggable属性，再拖动和释放动作。如果你要加点动画或者限制拖放区域，可以再搭配CSS3或者jQuery UI来搞。

提醒一句，兼容性虽然大部分浏览器都 OK，但移动端体验不太理想，如果你有触屏设备的需求，建议再做一层适配。

如果你正打算搞个交互效果比较丰富的网页，不妨试试这个拖放功能，用起来还挺顺的。

rar 文件大小：15.85KB