倩女幽魂技能拖动

《倩女幽魂》是一款非常受欢迎的网游，其中最重要的就是角色技能。而在游戏中，玩家可以通过拖动技能图标来实现快速使用技能。

这个功能非常方便，不仅可以大大缩短施法时间，还能让玩家更加专注于游戏本身。同时，玩家还可以自由地调整各个技能图标的位置和大小，以适应自己的习惯。

要实现这个功能，需要用到HTML5的拖放API。首先在HTML中创建一个技能图标：

<div id="skill1" draggable="true" ondragstart="drag(event)"><img src="skill1.png" /></div>

其中draggable="true"表示该元素可以被拖动，ondragstart="drag(event)"则表示开始拖动时触发drag函数。

接下来，在JavaScript中定义drag函数：

function drag(ev) {
ev.dataTransfer.setData("text/plain", ev.target.id);
}

该函数会将拖动的元素的ID存储到dataTransfer对象中，并设置数据类型为”plain text”。

最后，在另外一个元素上定义drop函数，实现拖拽结束时的操作：

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var target = ev.target;
while (target.tagName != "DIV") {
target = target.parentNode;
}
target.appendChild(document.getElementById(data));
}

该函数首先调用preventDefault()方法阻止默认事件，然后从dataTransfer对象中获取拖动元素的ID，并把该元素添加到拖放目标的子节点中。

通过以上步骤，就可以实现《倩女幽魂》中的技能拖动功能了。这个功能虽然看起来简单，但对游戏体验和操作流畅度的提升有着非常重要的作用。