introduction
Not long ago, the boss assigned me a task comparing hanging fried days. I want to achieve: in a picture frame with the mouse. In addition, the painting out of the box, you can achieve resize, which means you can zoom by mouse, you can drag and drop. I will not mention some of the details of the business in addition also need to implement interactive, and this article only talk about the principle of drag and drop me to achieve.
The initial target frame
Because demand is also required to draw more than a box, users will likely draw a lot of boxes, if simply to detect a mouse event location a box, can easily lead to disorder and drag the zoom function, therefore, the use of object-oriented thinking , drag and zoom the box becomes a target, bind all other mouse events are on this subject.
Ado, directly on the source, the idea is very simple.
function newBox(options) {
this.container = $('<div class="new_rect"></div>');
this.dragLeft = $('<div class="new_react-left"><div class="dots"></div></div>');
this.dragTop = $('<div class="new_react-top"><div class="dots"></div></div>');
this.dragRight = $('<div class="new_react-right"><div class="dots"></div></div>');
this.dragBottom = $('<div class="new_react-bottom"><div class="dots"></div></div>');
this.dragTopLeft = $('<div class="new_react-dots new_react-top-left"></div>');
this.dragTopRight = $('<div class="new_react-dots new_react-top-right"></div>');
this.dragBottomLeft = $('<div class="new_react-dots new_react-bottom-left"></div>');
this.dragBottomRight = $('<div class="new_react-dots new_react-bottom-right"></div>');
this.sureBtn = $('<div class="sureBtn"></div>');
this.cancelBtn = $('<div class="cancelBtn"></div>');
this.enableEdit = true;
this.init();
this.options = options;
}
newBox.prototype = {
init: function() {
this.container.append(this.dragLeft);
this.container.append(this.dragTop);
this.container.append(this.dragRight);
this.container.append(this.dragBottom);
this.container.append(this.dragTopLeft);
this.container.append(this.dragTopRight);
this.container.append(this.dragBottomLeft);
this.container.append(this.dragBottomRight);
this.container.append(this.sureBtn);
this.container.append(this.cancelBtn);
this.container.on({
'mousedown': this.containerMouseDown.bind(this),
'click': this.enableEditFunc.bind(this)
});
this.dragRight.on('mousedown', this.dragRightMouseDown.bind(this));
this.dragLeft.on('mousedown', this.dragLeftMouseDown.bind(this));
this.dragTop.on('mousedown', this.dragTopMouseDown.bind(this));
this.dragBottom.on('mousedown', this.dragBottomMouseDown.bind(this));
this.dragTopLeft.on('mousedown', this.dragTopLeftMouseDown.bind(this));
this.dragTopRight.on('mousedown', this.dragTopRightMouseDown.bind(this));
this.dragBottomRight.on('mousedown', this.dragBottomRightMouseDown.bind(this));
this.dragBottomLeft.on('mousedown', this.dragBottomLeftMouseDown.bind(this));
this.sureBtn.on('click', this.sureFunc.bind(this));
this.cancelBtn.on('click', this.cancelFunc.bind(this));
},
sureFunc: function() {
this.disableEditFunc();
if(this.options.sureFunc)
this.options.sureFunc(this.container);
return false;
},
cancelFunc: function() {
this.container.remove();
if(this.options.cancelFunc)
this.options.cancelFunc(this.container);
},
enableEditFunc: function() {
var sureBtn = this.sureBtn;
// 设置正在编辑的框的zindex为最大
this.container.css('z-index','100000000')
// 先保存未保存的
$('.new_rect .sureBtn').each(function() {
if($(this)[0] == sureBtn[0]){
return;
}
$(this).is(':visible') && $(this).click() && $(this).mouseleave();
})
this.enableEdit = true;
this.container.find('.new_react-dots, .dots').show();
this.sureBtn.show();
this.cancelBtn.show();
},
disableEditFunc: function() {
var width=this.container.width();
var height=this.container.height();
var area=parseInt(width*height);
this.container.css('z-index',100000000-area);
this.enableEdit = false;
this.container.find('.new_react-dots, .dots').hide();
this.sureBtn.hide();
this.cancelBtn.hide();
},
setPosition: function(position) {
this.container.css(position)
},
dragRightMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var rightElem = this.dragRight;
var o_x = ev.pageX;
var o_width = this.container.width();
var o_right = parseFloat(this.container.css('right'));
if(rightElem.setCapture) {
rightElem.setCapture();
}
$(document).on("mousemove.dragRight", doDragRight.bind(this));
$(document).on("mouseup.dragRight", stopDragRight.bind(this));
return false;
function doDragRight(e) {
var right = o_right - e.pageX + o_x;
if(right < 0)
right = 0;
if(right > o_width + o_right)
right = o_width + o_right
this.setPosition({
right: right
});
return false;
}
function stopDragRight(e) {
if(rightElem.releaseCapture) {
rightElem.releaseCapture();
}
$(document).off("mousemove.dragRight");
$(document).off("mouseup.dragRight");
return false;
}
},
dragLeftMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var leftElem = this.dragLeft;
var o_x = ev.pageX;
var o_width = this.container.width();
var o_left = parseFloat(this.container.css('left'));
if(leftElem.setCapture) {
leftElem.setCapture();
}
$(document).on("mousemove.dragLeft", doDragLeft.bind(this));
$(document).on("mouseup.dragLeft", stopDragLeft.bind(this));
return false;
function doDragLeft(e) {
var left = o_left + e.pageX - o_x;
if(left < 0)
left = 0;
if(left > o_width + o_left)
left = o_width + o_left
this.setPosition({
left: left
});
return false;
}
function stopDragLeft(e) {
if(leftElem.releaseCapture) {
leftElem.releaseCapture();
}
$(document).off("mousemove.dragLeft");
$(document).off("mouseup.dragLeft");
return false;
}
},
dragTopMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var topElem = this.dragTop;
var o_y = ev.pageY;
var o_height = this.container.height();
var o_top = parseFloat(this.container.css('top'));
if(topElem.setCapture) {
topElem.setCapture();
}
$(document).on("mousemove.dragTop", doDragTop.bind(this));
$(document).on("mouseup.dragTop", stopDragTop.bind(this));
return false;
function doDragTop(e) {
var top = o_top + e.pageY - o_y;
if(top < 0)
top = 0;
if(top > o_top + o_height)
top = o_top + o_height
this.setPosition({
top: top
});
return false;
}
function stopDragTop(e) {
if(topElem.releaseCapture) {
topElem.releaseCapture();
}
$(document).off("mousemove.dragTop");
$(document).off("mouseup.dragTop");
return false;
}
},
dragBottomMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var bottomElem = this.dragBottom;
var o_y = ev.pageY;
var o_height = this.container.height();
var o_bottom = parseFloat(this.container.css('bottom'));
if(bottomElem.setCapture) {
bottomElem.setCapture();
}
$(document).on("mousemove.dragBottom", doDragBottom.bind(this));
$(document).on("mouseup.dragBottom", stopDragBottom.bind(this));
return false;
function doDragBottom(e) {
var bottom = o_bottom - e.pageY + o_y;
if(bottom < 0)
bottom = 0;
if(bottom > o_bottom + o_height)
bottom = o_bottom + o_height
this.setPosition({
bottom: bottom
});
return false;
}
function stopDragBottom(e) {
if(bottomElem.releaseCapture) {
bottomElem.releaseCapture();
}
$(document).off("mousemove.dragBottom");
$(document).off("mouseup.dragBottom");
return false;
}
},
dragTopLeftMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var topLeftElem = this.dragTopLeft;
var o_y = ev.pageY;
var o_x = ev.pageX;
var o_height = this.container.height();
var o_width = this.container.width();
var o_top = parseFloat(this.container.css('top'));
var o_left = parseFloat(this.container.css('left'));
if(topLeftElem.setCapture) {
topLeftElem.setCapture();
}
$(document).on("mousemove.dragTopLeft", doDragTopLeft.bind(this));
$(document).on("mouseup.dragTopLeft", stopDragTopLeft.bind(this));
return false;
function doDragTopLeft(e) {
var top = o_top + e.pageY - o_y;
var left = o_left + e.pageX - o_x;
if(top < 0)
top = 0;
if(top > o_top + o_height)
top = o_top + o_height;
if(left < 0)
left = 0;
if(left > o_width + o_left)
left = o_width + o_left;
this.setPosition({
top: top,
left: left
});
return false;
}
function stopDragTopLeft(e) {
if(topLeftElem.releaseCapture) {
topLeftElem.releaseCapture();
}
$(document).off("mousemove.dragTopLeft");
$(document).off("mouseup.dragTopLeft");
return false;
}
},
dragTopRightMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var topRightElem = this.dragTopRight;
var o_y = ev.pageY;
var o_x = ev.pageX;
var o_height = this.container.height();
var o_width = this.container.width();
var o_top = parseFloat(this.container.css('top'));
var o_right = parseFloat(this.container.css('right'));
if(topRightElem.setCapture) {
topRightElem.setCapture();
}
$(document).on("mousemove.dragTopRight", doDragTopRight.bind(this));
$(document).on("mouseup.dragTopRight", stopDragTopRight.bind(this));
return false;
function doDragTopRight(e) {
var top = o_top + e.pageY - o_y;
var right = o_right - e.pageX + o_x;
if(top < 0)
top = 0;
if(top > o_top + o_height)
top = o_top + o_height;
if(right < 0)
right = 0;
if(right > o_width + o_right)
right = o_width + o_right;
this.setPosition({
top: top,
right: right
});
return false;
}
function stopDragTopRight(e) {
if(topRightElem.releaseCapture) {
topRightElem.releaseCapture();
}
$(document).off("mousemove.dragTopRight");
$(document).off("mouseup.dragTopRight");
return false;
}
},
dragBottomRightMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var bottomRightElem = this.dragBottomRight;
var o_y = ev.pageY;
var o_x = ev.pageX;
var o_height = this.container.height();
var o_width = this.container.width();
var o_bottom = parseFloat(this.container.css('bottom'));
var o_right = parseFloat(this.container.css('right'));
if(bottomRightElem.setCapture) {
bottomRightElem.setCapture();
}
$(document).on("mousemove.dragBottomRight", doDragTopRight.bind(this));
$(document).on("mouseup.dragBottomRight", stopDragTopRight.bind(this));
return false;
function doDragTopRight(e) {
var bottom = o_bottom - e.pageY + o_y;
var right = o_right - e.pageX + o_x;
if(bottom < 0)
bottom = 0;
if(bottom > o_bottom + o_height)
bottom = o_bottom + o_height;
if(right < 0)
right = 0;
if(right > o_width + o_right)
right = o_width + o_right;
this.setPosition({
bottom: bottom,
right: right
});
return false;
}
function stopDragTopRight(e) {
if(bottomRightElem.releaseCapture) {
bottomRightElem.releaseCapture();
}
$(document).off("mousemove.dragBottomRight");
$(document).off("mouseup.dragBottomRight");
return false;
}
},
dragBottomLeftMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var bottomLeftElem = this.dragBottomLeft;
var o_y = ev.pageY;
var o_x = ev.pageX;
var o_height = this.container.height();
var o_width = this.container.width();
var o_bottom = parseFloat(this.container.css('bottom'));
var o_left = parseFloat(this.container.css('left'));
if(bottomLeftElem.setCapture) {
bottomLeftElem.setCapture();
}
$(document).on("mousemove.dragBottomLeft", doDragTopLeft.bind(this));
$(document).on("mouseup.dragBottomLeft", stopDragTopLeft.bind(this));
return false;
function doDragTopLeft(e) {
var bottom = o_bottom - e.pageY + o_y;
var left = o_left + e.pageX - o_x;
if(bottom < 0)
bottom = 0;
if(bottom > o_bottom + o_height)
bottom = o_bottom + o_height;
if(left < 0)
left = 0;
if(left > o_width + o_left)
left = o_width + o_left;
this.setPosition({
bottom: bottom,
left: left
});
return false;
}
function stopDragTopLeft(e) {
if(bottomLeftElem.releaseCapture) {
bottomLeftElem.releaseCapture();
}
$(document).off("mousemove.dragBottomLeft");
$(document).off("mouseup.dragBottomLeft");
return false;
}
},
containerMouseDown: function(ev) {
if(!this.enableEdit)
return false;
var o_x = ev.pageX;
var o_y = ev.pageY;
var containerWidth = this.container.width();
var containerHeight = this.container.height();
var o_top = parseFloat(this.container.css('top'));
var o_left = parseFloat(this.container.css('left'));
var o_right = parseFloat(this.container.css('right'));
var o_bottom = parseFloat(this.container.css('bottom'));
if(this.container.setCapture) {
this.container.setCapture();
}
$(document).on("mousemove.container", doDrag.bind(this));
$(document).on("mouseup.container", stopDrag.bind(this));
return false;
function doDrag(e) {
var disY = e.pageY - o_y;
var disX = e.pageX - o_x;
var top = o_top + disY;
var left = o_left + disX;
var right = o_right - disX;
var bottom = o_bottom - disY;
if(top < 0) {
top = 0;
bottom = o_bottom + o_top;
}
if(bottom < 0) {
bottom = 0;
top = o_top + o_bottom;
}
if(left < 0) {
left = 0;
right = o_right + o_left;
}
if(right < 0) {
right = 0;
left = o_right + o_left;
}
this.setPosition({top: top, bottom: bottom, left: left, right: right});
return false;
}
function stopDrag(ev) {
if(this.container.releaseCapture) {
this.container.releaseCapture();
}
$(document).off("mousemove.container");
$(document).off("mouseup.container");
return false;
}
}
}
At this point, a support zoom and drag and drop the box object has been created, but not yet implemented the initial frame function, in fact, draw the initial box ideas more simple, is recorded when the mouse mousedown to the x, y coordinates and mouseup the mouse x, y coordinates, and the coordinate values, and set the width and height of the new div positioned on it. Here is the source code, I direct it into a jquery plugin.
$.fn.draw_drag_test = function(options) {
var position = {}
var elemWidth, elemHeight, o_x, o_y, d_x, d_y, rect, o_left, o_top;
var mouseDown = function(e) {
$(this).on({
'mousemove': mouseMove,
'mouseup': mouseUp
})
var elemLeft = $(this).offset().left,
elemTop = $(this).offset().top;
elemWidth = $(this).width();
elemHeight = $(this).height();
o_x = e.pageX;
o_y = e.pageY;
position.left = o_left = o_x - elemLeft;
position.top = o_top = o_y - elemTop;
rect = new newBox(options);
rect.container.css('z-index','100000000');
$(this).append(rect.container);
}
var mouseMove = function(e) {
var m_x = e.pageX,
m_y = e.pageY;
d_x = m_x - o_x;
d_y = m_y - o_y;
position.right = elemWidth - position.left - d_x;
position.bottom = elemHeight - position.top - d_y;
if(d_x < 0) {
position.right = elemWidth - o_left;
position.left = o_left + d_x;
}else {
position.left = o_left;
}
if(d_y < 0) {
position.bottom = elemHeight - o_top;
position.top = o_top + d_y;
}else {
position.top = o_top;
}
rect.setPosition(position);
}
var mouseUp = function(e) {
$(this).off('mouseup', mouseUp);
$(this).off('mousemove', mouseMove);
$(this).off('mousedown', mouseDown);
}
return this.each(function() {
$(this).off('mousedown').on({
'mousedown': mouseDown
})
return this;
})
}In fact, here we can see out, thanks to object-oriented mechanism, we can achieve some very simple drag and drop frame. And the method also left a callback interface to facilitate some interaction according to different business needs.