一个页面，页面结构如下：
<body>
<div style="width:300px; height:300px;">
<span>一个元素</span>
<span>一个元素</span>
<span>一个元素</span>
<span>一个元素</span>
<span>一个元素</span>
<span>一个元素</span>
</div>
</body>
想要的效果是：在手机端查看页面，div中的span标签可以被拖动到其它地方，整个页面保持不动。
为div添加了拖动事件后出现的效果是：按住div内的一个span标签进行从上向下拖动，整个页面都被拖动了，用微信内置的浏览器可以看到页面上方出现了黑色的背景，里面有文字“由qq浏览器提供x5内核”等字样，在网上查的方法说禁用了body元素的拖动默认操作就可以了，但是那样的话div中的span标签也不能拖动了。
有什么方法可以解决吗？