分享一個(gè)封裝好的拖動(dòng)插件，使用方式很簡(jiǎn)單，入?yún)魅胄枰蟿?dòng)的dom即可（支持pc端，h5端）
例子：Drag(document.getElementsByClassName("test")[0]);
效果：
廢話不多話上代碼：
(function?(window)?{
????????????var?dom?=?{
????????????????//綁定事件
????????????????on:?function?(node,?eventName,?handler)?{
????????????????????if?(node.addEventListener)?{
????????????????????????node.addEventListener(eventName,?handler);
????????????????????}?else?{
????????????????????????node.attachEvent("on"?+?eventName,?handler);
????????????????????}
????????????????},
????????????????//獲取元素的樣式
????????????????getStyle:?function?(node,?styleName)?{
????????????????????var?realStyle?=?null;
????????????????????if?(window.getComputedStyle)?{
????????????????????????realStyle?=?window.getComputedStyle(node,?null)[styleName];
????????????????????}?else?if?(node.currentStyle)?{
????????????????????????realStyle?=?node.currentStyle[styleName];
????????????????????}
????????????????????return?realStyle;
????????????????},
????????????????//獲取設(shè)置元素的樣式
????????????????setCss:?function?(node,?css)?{
????????????????????for?(var?key?in?css)?{
????????????????????????node.style[key]?=?css[key];
????????????????????}
????????????????},
????????????};
????????????//#region?拖拽元素類
????????????function?DragElement(node)?{
????????????????this.node?=?node;
????????????????this.x?=?0;
????????????????this.y?=?0;
????????????}
????????????DragElement.prototype?=?{
????????????????constructor:?DragElement,
????????????????init:?function?()?{
????????????????????this.setEleCss({
????????????????????????left:?dom.getStyle(node,?"left"),
????????????????????????top:?dom.getStyle(node,?"top"),
????????????????????}).setXY(node.style.left,?node.style.top);
????????????????},
????????????????setXY:?function?(x,?y)?{
????????????????????this.x?=?parseInt(x)?||?0;
????????????????????this.y?=?parseInt(y)?||?0;
????????????????????return?this;
????????????????},
????????????????setEleCss:?function?(css)?{
????????????????????dom.setCss(this.node,?css);
????????????????????return?this;
????????????????},
????????????};
????????????//#endregion
????????????//#region?鼠標(biāo)元素
????????????function?Mouse()?{
????????????????this.x?=?0;
????????????????this.y?=?0;
????????????}
????????????Mouse.prototype.setXY?=?function?(x,?y)?{
????????????????this.x?=?parseInt(x);
????????????????this.y?=?parseInt(y);
????????????};
????????????//#endregion
????????????//拖拽配置
????????????var?draggableConfig?=?{
????????????????zIndex:?1,
????????????????draggingObj:?null,
????????????????mouse:?new?Mouse(),
????????????};
????????????function?Drag(ele)?{
????????????????this.ele?=?ele;
????????????????dom.on(ele,?"mousedown",?mouseDown);
????????????????dom.on(ele,?"touchstart",?mouseDown);
????????????????dom.on(ele,?"mousemove",?mousemove);
????????????????dom.on(ele,?"touchmove",?mousemove);
????????????????dom.on(ele,?"mouseup",?mouseup);
????????????????dom.on(ele,?"touchend",?mouseup);
????????????????ele.onselectstart?=?function?()?{
????????????????????//防止拖拽對(duì)象內(nèi)的文字被選中
????????????????????return?false;
????????????????};
????????????}
????????????function?getPositionInfo(event)?{
????????????????var?clientX?=?event.clientX;
????????????????if?(event.clientX)?{
????????????????????return?event;
????????????????}?else?{
????????????????????return?event.targetTouches[0];
????????????????}
????????????}
????????????function?mouseDown(event)?{
????????????????var?ele?=?event.target?||?event.srcElement;
????????????????var?{
????????????????????clientX,
????????????????????clientY
????????????????}?=?getPositionInfo(event);
????????????????draggableConfig.mouse.setXY(clientX,?clientY);
????????????????draggableConfig.draggingObj?=?new?DragElement(ele);
????????????????draggableConfig.draggingObj.setXY(ele.style.left,?ele.style.top)
????????????????????.setEleCss({
????????????????????????zIndex:?draggableConfig.zIndex++,
????????????????????????position:?"relative",
????????????????????});
????????????}
????????????function?mousemove(event)?{
????????????????if?(draggableConfig.draggingObj)?{
????????????????????var?{
????????????????????????clientX,
????????????????????????clientY
????????????????????}?=?getPositionInfo(event);
????????????????????var?mouse?=?draggableConfig.mouse,
????????????????????????draggingObj?=?draggableConfig.draggingObj;
????????????????????draggingObj.setEleCss({
????????????????????????left:?parseInt(clientX?-?mouse.x?+?draggingObj.x)?+?"px",
????????????????????????top:?parseInt(clientY?-?mouse.y?+?draggingObj.y)?+?"px",
????????????????????});
????????????????}
????????????}
????????????function?mouseup(event)?{
????????????????draggableConfig.draggingObj?=?null;
????????????}
????????????window.Drag?=?Drag;
})(window);
感謝，老鐵的閱讀，如果喜歡的,幫忙點(diǎn)個(gè)??,你的支持我是前進(jìn)的動(dòng)力++
