JavaScript CSS修改学习第六章 拖拽(6)

case 13: // enter
case 27: // escape
dragDrop.releaseElement();
return false;


如果用户点击Enter或者Esc键,就调用releaseElement()函数。如果你想改变释放元素的按键,可以再这里添加。

复制代码 代码如下:

default:
return true;
}


如果用户按下了其他键,就执行默认动作并且结束函数。

复制代码 代码如下:

dragDrop.setPosition(dragDrop.dXKeys,dragDrop.dYKeys);


现在dXKeys和dYKeys已经更新我们发送到setPosition()函数中来改变元素的位置。

复制代码 代码如下:

if (evt.preventDefault)
evt.preventDefault();
return false;
},


最后我们需要阻止默认事件,如果用户点击下方向键,那么在执行完上面的代码后页面会向下滚动。W3C兼容浏览器中通过preventDefault实现,在IE中通过返回false实现。


释放元素
当用户释放了元素,函数releaseElement就会被调用。他会移除所有代码设置的事件处理程序,移除dragged类,清理draggedObject然后等待用户动作。

复制代码 代码如下:


releaseElement: function() {
    removeEventSimple(document,'mousemove',dragDrop.dragMouse);
    removeEventSimple(document,'mouseup',dragDrop.releaseElement);
    removeEventSimple(document,'keypress',dragDrop.dragKeys);
    removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
    removeEventSimple(document,'keydown',dragDrop.dragKeys);
    dragDrop.draggedObject.className = dragDrop.draggedObject.className.replace(/dragged/,'');
    dragDrop.draggedObject = null;
}


你或许在用户释放元素之后还想做些什么,可以把你的函数添加在这里。
翻译地址:
转载请保留以下信息
作者:北玉(tw:@rehawk)

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdspwg.html