HTML5 添加了对拖放(drag and drop)的支持。我们之前只能依靠jQuery 这样的JavaScript库才能处理这种操作。把拖放内置到浏览器的好处是它可以正确的集成到操作系统中,而且正如将要看到的,它能跨浏览器工作。1. 创建来源项目我们通过 draggable属 ...
HTML5 添加了对拖放(drag and drop)的支持。我们之前只能依靠jQuery 这样的JavaScript库才能处理这种操作。把拖放内置到浏览器的好处是它可以正确的集成到操作系统中,而且正如将要看到的,它能跨浏览器工作。
1. 创建来源项目
我们通过 draggable属性告诉浏览器文档里的哪些元素可以被拖动。这个值有三个允许的值:
它的默认值是auto,即把决定权交给浏览器,通常来说这就意味着所有元素默认都是可拖动的,我们必须显示设置draggable 属性为false 来禁止拖动。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定义可拖放项目</title> <style> #src > * {float: left;} #target,#src > img {border: thin solid black;padding: 2px;margin: 4px;} #target {height: 81px;width: 81px;text-align: center;display: table;} #target > p {display: table-cell;vertical-align: middle;} #target > img {margin: 1px;} </style></head><body><div id="src"> <img draggable="true" id="apple" src='/images/loading.gif' data-original="../imgs/apple.png" /> <img draggable="true" id="banana" src='/images/loading.gif' data-original="../imgs/banana-small.png" /> <img draggable="true" id="lemon" src='/images/loading.gif' data-original="../imgs/lemon100.png" /> <div id="target"> <p>Drop Here</p> </div></div><script> var src = document.getElementById("src"); var target = document.getElementById("target");</script></body></html>
原标题:【高级功能】使用拖放
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。