分享一個(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)力++