美文网首页
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