javascripthtml5轻松实现拖动功能-创新互联

拖放（drag和drop）是html5标准组成，下面我们从五个方面对其进行叙述，分别是如何成为拖动物体，如何成为拖动目标，拖动物体上拥有的事件，拖动目标上拥有的事件以及拖放物体间如何传递信息。

拖动物体上拥有的事件

• dragstart （在物体刚被拖动时触发）
• drag （在dragstart事件触发之后就被触发）
• dragend （拖动事件结束时触发）
  

拖动目标上拥有的事件

• dragenter （当拖拽元素进入放置目标时触发）
• dragover （当拖拽元素在放置目标中移动时触发，类似于mouseover）
• drop （当拖拽元素放置在放置目标中时触发）
  

如何成为拖动物体

在html中img元素默认可以进行拖拽，其它元素需要设置draggable=true，即可对其进行拖拽。

如何成为拖动目标

html中，元素默认不能成为放置目标，只有我们禁止了drapenter和drapover事件的默认行为时，可以称为拖放目标。

droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。