美文网首页
jquery简单拖拽

jquery简单拖拽

作者: Mcq | 来源:发表于2020-12-21 22:44 被阅读0次
;(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'});

相关文章

网友评论

      本文标题:jquery简单拖拽

      本文链接:https://www.haomeiwen.com/subject/aahhbktx.html