JS-实现可拖动的div;实时监听input标签value变化

实现可拖动的div

var mover = new Mover(document.getElementById("header"));
// js封装:实现可拖动的div.
function Mover(title) {
    this.obj = title;
    this.startx = 0;
    this.starty;
    this.startLeft;
    this.startTop;
    this.mainDiv = title.parentNode;
    var that = this;
    this.isDown = false;
    this.movedown = function (e) {
        e = e ? e : window.event;
        if (!window.captureEvents) {
            this.setCapture();
        }
        that.isDown = true;
        that.startx = e.clientX;
        that.starty = e.clientY;

        that.startLeft = parseInt(that.mainDiv.style.left);
        that.startTop = parseInt(that.mainDiv.style.top);
    };
    this.move = function (e) {
        e = e ? e : window.event;
        if (that.isDown) {
            that.mainDiv.style.left = e.clientX - (that.startx - that.startLeft) + "px";
            that.mainDiv.style.top = e.clientY - (that.starty - that.startTop) + "px";
        }
    };
    this.moveup = function () {
        that.isDown = false;
        if (!window.captureEvents) {
            this.releaseCapture();
        } //事件捕获仅支持ie
    };
    this.obj.onmousedown = this.movedown;
    this.obj.onmousemove = this.move;
    this.obj.onmouseup = this.moveup;

    //非ie浏览器
    document.addEventListener("mousemove", this.move, true);
}

实时监听input内容变化

// 实时监听input内容变化.
$('.text_box').bind('input propertychange', function() {
    // 一些代码逻辑.
});

猜你喜欢

转载自blog.csdn.net/rongxiang111/article/details/81344360