;(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'});
网友评论