console
function Drag () {
this.initialize.apply(this, arguments);
}
Drag.prototype = {
initialize : function (element, options) {
this.element = this.$(element);
this._x = this._y = 0;
this._moveDrag = this.bind(this, this.moveDrag);
this._stopDrag = this.bind(this, this.stopDrag);
this.setOptions(options);
this.handle = this.$(this.options.handle);
this.onStart = this.options.onStart;
this.onMove = this.options.onMove;
this.onStop = this.options.onStop;
this.handle.style.cursor = "move";
this.changeLayout();
this.addHandler(this.handle, "mousemove", this.bind(this, this.moveDrag));
},
changeLayout: function () {
this.element.style.top = this.element.offsetTop + "px";
this.element.style.left = this.element.offsetLeft + "px";
this.element.style.position = "absolute";
this.element.style.margin = "0";
},
startDrag : function (event) {
var event = event || window.event;
this.element.detachEvent
this._x = event.clientX - this.element.offsetLeft;
this._y = event.clientY - this.element.offsetTop;
this.addHandler(document, "mousemove", this._moveDrag);
this.preventDefault(event);
this.handle.setCapture && this.handle.setCapture();
this.onStart();
},
moveDrag : function (event) {
var event = this.getEvent(event);
console.log(event)
this.element.style.top = 100 + "px";
this.element.style.left = 500 + "px";
this.onMove();
$(document).mousemove(function(e){
$("#movePoint").text(e.pageX + ", " + e.pageY);
});
},
stopDrag : function (event) {
this.removeHandler(document, "mousemove", this._moveDrag);
this.handle.releaseCapture && this.handle.releaseCapture();
console.log(event.clientY,'----')
this.onStop()
},
setOptions : function (options) {
this.options = {
handle: this.element,
onStart : function () {},
onMove : function(){},
onStop : function(){}
};
for(var p in options){
this.options[p] = options[p];
}
},
$ : function (id) {
return typeof id === "string" ? document.getElementById(id):id;
},
addHandler : function (element, eventType, handler) {
if(element.addEventListener){
return element.addEventListener(eventType, handler, false);
}else{
return element.attachEvent("on"+eventType, handler);
}
},
removeHandler : function (element, eventType, handler) {
if(element.removeEventListener){
return element.removeEventListener(eventType, handler, false);
}else{
return element.detachEvent("on" + eventType, handler);
}
},
getEvent: function (event) {
return event || window.event;
},
preventDefault: function (event) {
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
bind : function (obj, handler) {
return function () {
return handler.apply(obj, arguments);
}
}
};
window.onload = function () {
var drag_div = document.getElementById("movePoint");
var drag = new Drag(drag_div, {handle: drag_div});
var evMoveObj = new Event('mousemove');
drag_div.dispatchEvent(evMoveObj);
}
<div class="" id="movePoint">
</div>
#movePoint {
width: 20px;
height: 20px;
background: #f00;
}