1. 程式人生 > >JS-實現可拖動的div;實時監聽input標籤value變化

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() {
    // 一些程式碼邏輯.
});