Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

拖拽相关的API

  拖拽相关的API很早以前就有了,以前文件上传相关的文章中也曾经出现过,只是碍于一般项目的兼容性需求,我一直都很少使用这玩意儿。最近做了点ChromeOnly的东西,终于用上了这些。其实也没什么难点,下面只是做了个简单的示范而已。
<style>
div {border:1px solid;padding:10px;display:inline-block;margin:10px}
#a {background:#FEE;border-color:#F00;}
#b {background:#EFE;border-color:#0C0;}
#c {background:#EEF;border-color:#00F;}
</style>
<div id="a" draggable="true"></div>
<div id="b" draggable="true"></div>
<div id="c" draggable="true"></div>
<script>
//需要屏蔽掉dragover的默认行为,否则drop可能不会触发
document.ondragover=function(e){
  e.preventDefault();
};
//用于记录开始拖动的对象
var src;
//a、b、c,这三个元素拖动时被记录
a.ondragstart=b.ondragstart=c.ondragstart=function(e){
  src=e.target;
};
//document、a、b、c,这四个节点接受拖动后的放置
document.ondrop=a.ondrop=b.ondrop=c.ondrop=function(e){
  //完成后处理的动作,这里修改元素的关系
  e.target.appendChild(src);
};
</script>
  这个例子中有三个盒子,可以任意拖拽它们,使得它们形成各种嵌套关系。要注意的是ondragover事件的默认行为必须阻止,否则可能会无法触发ondrop,因为很多浏览器中ondragover事件的默认行为会阻止它其它事件的发生。示例中直接在document上绑定了,因为这个示例中document本身就是一个拖动的接受者。总之,所有想要触发的元素,其自身或祖辈元素就需要阻止掉ondragover事件的默认行为。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^