jquery简单拖拽

2020-12-21  本文已影响0人  Mcq
;(function ($) {
        $.fn.extend({
            hjDrag(option) {
                const ele = option.titleSelector ? this.find(option.titleSelector) : this
                this.css("position", "relative")
                ele.css("cursor", "move")
                ele.on("mousedown", e => {
                    const startX = e.clientX, startY = e.clientY
                    const {left, top} = this.position();
                    const _this = this;
                    const debounce = (fn, delay) => {
                        let prev = Date.now();
                        return function (e) {
                            let now = Date.now();
                            if (now - prev >= delay) {
                                fn(e);
                                prev = Date.now();
                            }
                        }
                    }
                    $(document).on("mousemove", debounce(e => {
                        const _left = e.clientX - startX, _top = e.clientY - startY
                        _this.css({left: left + _left, top: top + _top})
                    }, 5))
                    $(document).on("mouseup", function () {
                        $(this).off("mousemove")
                    })
                    e.preventDefault()
                })
            }
        })
    })(jQuery)


      //  ...usage
      $("#addOrderDetailDialog .modal-content").hjDrag({titleSelector:'h4'});
上一篇 下一篇

猜你喜欢

热点阅读