你的位置:首页 > 软件开发 > Java > 【高级功能】使用拖放

【高级功能】使用拖放

发布时间:2016-08-31 22:00:04
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 (#换成@)。

可能感兴趣文章

我的浏览记录