Sử dụng thư viện displace để làm menu kéo thả (ok):)))

https://github.com/catc/displace

316KB

displace-master.zip

archive

Open

Bước 1: Tải thư v iện displace.js

! function(t, e) {
    "object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define([], e) : "object" == typeof exports ? exports.displacejs = e() : t.displacejs = e()
}(this, function() {
    return function(t) {
        function e(n) {
            if (o[n]) return o[n].exports;
            var s = o[n] = {
                exports: {},
                id: n,
                loaded: !1
            };
            return t[n].call(s.exports, s, s.exports, e), s.loaded = !0, s.exports
        }
        var o = {};
        return e.m = t, e.c = o, e.p = "", e(0)
    }([function(t, e, o) {
        "use strict";

        function n(t) {
            return t && t.__esModule ? t : {
                default: t
            }
        }
        var s = o(1),
            i = n(s);
        t.exports = i.default
    }, function(t, e, o) {
        "use strict";

        function n(t, e) {
            if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
        }

        function s() {
            var t = this,
                e = this.el,
                o = this.opts || c,
                n = {};
            if (e.style.position = "absolute", this.handle = o.handle || e, o.constrain) {
                for (var s = o.relativeTo || e.parentNode, a = e, h = 0, v = 0; a !== s;) a = a.parentNode, (0, i.isRelative)(a) && (h -= a.offsetLeft, v -= a.offsetTop), a === s && (h += a.offsetLeft, v += a.offsetTop);
                var l = h + s.offsetWidth - e.offsetWidth,
                    f = v + s.offsetHeight - e.offsetHeight;
                n.xClamp = (0, i.generateClamp)(h, l), n.yClamp = (0, i.generateClamp)(v, f)
            }
            this.opts = o, this.data = n, this.events = {
                mousedown: u.mousedown.bind(this),
                mouseup: u.mouseup.bind(this),
                touchstart: u.touchstart.bind(this),
                touchstop: u.touchstop.bind(this),
                scrollFix: function(e) {
                    t.isDragging && e.preventDefault()
                }
            }, this.handleMove = r(this.opts.customMove), this.handle.addEventListener("mousedown", this.events.mousedown, !1), this.handle.addEventListener("touchstart", this.events.touchstart, !1), document.addEventListener("touchmove", this.events.scrollFix, {
                passive: !1
            })
        }
        Object.defineProperty(e, "__esModule", {
            value: !0
        });
        var i = o(2),
            u = o(3),
            r = (0, i.generateMoveFn)(),
            c = {
                constrain: !1,
                relativeTo: null,
                handle: null,
                highlightInputs: !1,
                onMouseDown: null,
                onMouseMove: null,
                onMouseUp: null,
                onTouchStart: null,
                onTouchMove: null,
                onTouchStop: null,
                customMove: null
            },
            a = function() {
                function t(e, o) {
                    if (n(this, t), !e) throw Error("Must include moveable element");
                    this.el = e, this.opts = o, s.call(this)
                }
                return t.prototype.reinit = function() {
                    this.destroy(), s.call(this)
                }, t.prototype.destroy = function() {
                    var t = this.events;
                    this.handle.removeEventListener("mousedown", t.mousedown, !1), document.removeEventListener("mousemove", t.mousemove, !1), document.removeEventListener("mouseup", t.mouseup, !1), this.handle.removeEventListener("touchstart", t.touchstart, !1), document.removeEventListener("touchmove", t.touchmove, !1), document.removeEventListener("touchstop", t.touchstop, !1), document.removeEventListener("touchmove", this.events.scrollFix, {
                        passive: !1
                    })
                }, t
            }();
        e.default = function(t, e) {
            return new a(t, e)
        }
    }, function(t, e) {
        "use strict";

        function o(t, e) {
            return function(o) {
                return Math.min(Math.max(o, t), e)
            }
        }

        function n(t) {
            return "relative" === window.getComputedStyle(t).position
        }

        function s() {
            return window.requestAnimationFrame ? function(t) {
                var e = t || i;
                return function(t, o, n) {
                    window.requestAnimationFrame(function() {
                        e(t, o, n)
                    })
                }
            } : function(t) {
                return function(e, o, n) {
                    var s = t || i;
                    s(e, o, n)
                }
            }
        }

        function i(t, e, o) {
            t.style.left = e + "px", t.style.top = o + "px"
        }
        Object.defineProperty(e, "__esModule", {
            value: !0
        }), e.generateClamp = o, e.isRelative = n, e.generateMoveFn = s
    }, function(t, e) {
        "use strict";

        function o(t) {
            var e = this.opts;
            if (e.highlightInputs) {
                var o = t.target.tagName.toLowerCase();
                if ("input" === o || "textarea" === o) return
            }
            if (0 === t.button) {
                var s = this.el,
                    i = this.events;
                "function" == typeof e.onMouseDown && e.onMouseDown(s, t);
                var u = t.clientX - s.offsetLeft,
                    r = t.clientY - s.offsetTop;
                i.mousemove = n.bind(this, u, r), document.addEventListener("mousemove", i.mousemove, !1), document.addEventListener("mouseup", i.mouseup, !1)
            }
        }

        function n(t, e, o) {
            var n = this.el,
                s = this.opts,
                i = this.data;
            "function" == typeof s.onMouseMove && s.onMouseMove(n, o);
            var u = o.clientX - t,
                r = o.clientY - e;
            return s.constrain && (u = i.xClamp(u), r = i.yClamp(r)), this.handleMove(n, u, r), o.preventDefault(), !1
        }

        function s(t) {
            var e = this.el,
                o = this.opts,
                n = this.events;
            "function" == typeof o.onMouseUp && o.onMouseUp(e, t), document.removeEventListener("mouseup", n.mouseup, !1), document.removeEventListener("mousemove", n.mousemove, !1)
        }

        function i(t) {
            var e = this.opts;
            if (e.highlightInputs) {
                var o = t.target.tagName.toLowerCase();
                if ("input" === o || "textarea" === o) return
            }
            var n = this.el,
                s = this.events;
            "function" == typeof e.onTouchStart && e.onTouchStart(n, t);
            var i = t.targetTouches[0],
                r = i.clientX - n.offsetLeft,
                c = i.clientY - n.offsetTop;
            s.touchmove = u.bind(this, r, c), this.isDragging = !0, document.addEventListener("touchmove", s.touchmove, !1), document.addEventListener("touchend", s.touchstop, !1), document.addEventListener("touchcancel", s.touchstop, !1)
        }

        function u(t, e, o) {
            var n = this.el,
                s = this.opts,
                i = this.data;
            "function" == typeof s.onTouchMove && s.onTouchMove(n, o);
            var u = o.targetTouches[0],
                r = u.clientX - t,
                c = u.clientY - e;
            return s.constrain && (r = i.xClamp(r), c = i.yClamp(c)), this.handleMove(n, r, c), o.preventDefault(), !1
        }

        function r(t) {
            this.isDragging = !1;
            var e = this.el,
                o = this.opts,
                n = this.events;
            "function" == typeof o.onTouchStop && o.onTouchStop(e, t), document.removeEventListener("touchmove", n.touchmove, !1), document.removeEventListener("touchend", n.touchstop, !1), document.removeEventListener("touchcancel", n.touchstop, !1)
        }
        Object.defineProperty(e, "__esModule", {
            value: !0
        }), e.mousedown = o, e.mousemove = n, e.mouseup = s, e.touchstart = i, e.touchmove = u, e.touchstop = r
    }])
});

Link: https://github.com/catc/displace

Bước 2 : Sử dụng mẫu

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>displace.js</title>
		<link rel="stylesheet" href="./style.css">
		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
	</head>
	<body>
		<span class="moveable"><span class="moveable__msg">Drag me</span></span>	
		<script src="./displace.min.js"></script>
		<script>
			const displace = window.displacejs;
			jQuery(document).ready(function($) {
				const el = document.querySelector('.moveable');
				displace(el);
			});
		</script>
	</body>
</html>